React 17 업그레이드 후기 - 점진적 마이그레이션 전략

배경

10월에 출시된 React 17을 프로덕션에 적용했다. 이번 메이저 버전은 Breaking Changes가 거의 없는 것이 특징이다. 오히려 다음 버전으로 가기 위한 징검다리 역할에 가깝다.

주요 변경사항

새로운 JSX Transform

가장 눈에 띄는 변화는 JSX Transform이다. 더 이상 import React from 'react'를 쓰지 않아도 된다.

// React 16
import React from 'react';

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

// React 17 (새 JSX Transform)
function Button() {
  return <button>클릭</button>;
}

번들 크기가 소폭 줄어들고, 파일마다 React를 import 하는 보일러플레이트가 사라진다.

이벤트 위임 변경

React 16까지는 이벤트를 document에 위임했지만, 17부터는 React 트리의 루트 DOM 컨테이너에 위임한다. 이는 레거시 jQuery 코드나 다른 라이브러리와 함께 사용할 때 발생하던 문제를 해결한다.

우리 서비스는 일부 페이지에서 여전히 jQuery를 사용 중이라 이 변경이 큰 도움이 되었다.

업그레이드 과정

package.json 업데이트
codemod로 JSX Transform 적용 (npx react-codemod update-react-imports)
ESLint 설정 수정
테스트 실행 및 검증

실제 코드 변경은 거의 없었고, 대부분 설정 조정이었다. 다만 useEffect의 cleanup 타이밍이 약간 변경되어 일부 테스트 코드를 수정해야 했다.

점진적 업그레이드

React 17의 핵심은 점진적 업그레이드가 가능하다는 점이다. 하나의 앱에서 React 17과 18을 동시에 사용할 수 있도록 설계되었다. 대규모 레거시 코드베이스를 운영하는 입장에서는 반가운 소식이다.

마무리

체감상 큰 변화는 없지만, 안정적인 마이그레이션이었다. 내년에 나올 React 18의 Concurrent Mode를 위한 준비 작업으로 보면 될 것 같다.