Builder.shin

React 17에서 18로 마이그레이션 준비하기

배경

사내 대시보드 프로젝트가 React 17.0.2를 사용 중이다. React 팀에서 18 알파를 발표하면서 breaking changes를 미리 확인할 필요가 있었다.

주요 변경사항

Automatic Batching

기존에는 React 이벤트 핸들러 내부에서만 배칭이 동작했다. 18부터는 Promise, setTimeout 등에서도 자동으로 배칭된다.

// React 17: 2번 렌더링
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
}, 1000);

// React 18: 1번 렌더링

대부분 긍정적이지만, 의도적으로 분리된 업데이트가 있다면 flushSync를 사용해야 한다.

createRoot API

기존 ReactDOM.render 대신 createRoot를 사용하도록 변경됐다.

// Before
ReactDOM.render(<App />, document.getElementById('root'));

// After
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Suspense 개선

서버 사이드에서도 Suspense를 지원한다. 현재 프로젝트에선 코드 스플리팅 정도만 사용 중이라 큰 영향은 없을 것 같다.

호환성 체크

주요 의존성 라이브러리들의 React 18 지원 여부를 확인했다.

  • React Router v6: 베타 단계, 18 호환 예정
  • Redux: 문제없음
  • Material-UI: v5부터 지원 계획
  • React Query: 3.x에서 지원 예정

마이그레이션 전략

  1. 알파/베타 단계에서는 개발 환경에서만 테스트
  2. stable 릴리즈 후 staging 배포
  3. 주요 기능 QA 후 프로덕션 적용

당장은 급하지 않지만, 18의 Concurrent 기능들이 매력적이다. 특히 대용량 리스트 렌더링 성능 개선을 기대하고 있다.

React 17에서 18로 마이그레이션 준비하기