React 17 RC와 점진적 업그레이드 전략

배경

사내 어드민 시스템이 React 16.8에 머물러 있는 상태에서 React 17 RC 출시 소식을 접했다. 새로운 기능보다는 마이그레이션을 쉽게 만드는 것에 초점을 맞춘 버전이라는 점이 인상적이었다.

주요 변경사항

1. 새로운 JSX Transform

기존에는 JSX를 사용할 때 파일 상단에 import React from 'react'가 필수였다.

import React from 'react';

function Button() {
  return <button>Click</button>;
}

React 17부터는 이 import가 불필요해졌다. 번들 크기도 소폭 감소한다.

// import 없이 사용 가능
function Button() {
  return <button>Click</button>;
}

2. 이벤트 위임 변경

React 16까지는 모든 이벤트가 document에 위임되었으나, 17부터는 루트 DOM 컨테이너에 위임된다. 이는 동일 페이지에서 여러 React 버전을 사용할 수 있게 해준다.

3. 점진적 업그레이드

가장 큰 장점은 앱 전체를 한 번에 업그레이드하지 않아도 된다는 점이다. 레거시 코드는 React 16으로 유지하고 새 기능만 React 17로 개발하는 시나리오가 가능해졌다.

마이그레이션 계획

우선 테스트 환경에서 codemod를 실행해봤다.

npx react-codemod update-react-imports

불필요한 React import를 자동으로 제거해주는데, ESLint 설정도 함께 조정이 필요했다.

// .eslintrc.js
rules: {
  'react/react-in-jsx-scope': 'off',
}

소감

파격적인 기능 추가 대신 안정성과 호환성에 집중한 릴리스다. 당장 업그레이드할 이유는 크지 않지만, 향후 React 18로 가는 중간 다리 역할을 할 것으로 보인다. 9월 정식 릴리스를 지켜본 후 4분기에 적용 예정이다.