React 18 beta 업그레이드 전 체크리스트 정리

배경

회사 프로젝트에 React 18 beta를 적용할지 검토하면서 공식 문서와 릴리즈 노트를 정리했다. 2022년 초 정식 출시 예정이라 미리 준비해두는 것이 좋겠다는 판단이었다.

주요 변경사항

1. createRoot API

기존 ReactDOM.render가 deprecated 되고 createRoot를 사용하도록 변경되었다.

// Before
import ReactDOM from 'react-dom';
ReactDOM.render(<App />, document.getElementById('root'));

// After
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(<App />);

2. Automatic Batching

이전에는 React 이벤트 핸들러 내부에서만 state 업데이트가 배치되었지만, 18부터는 Promise, setTimeout 등 비동기 상황에서도 자동으로 배치된다.

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

3. Suspense 개선

SSR에서 Suspense를 사용할 수 있게 되었다. 하지만 아직 data fetching 라이브러리 지원이 부족해서 실무 적용은 보류했다.

마이그레이션 체크 포인트

TypeScript 타입 업데이트: @types/react, @types/react-dom 버전 확인 필요
테스팅 라이브러리: React Testing Library 12 이상 필요
Third-party 라이브러리: React Router, Redux 등 호환성 확인
useEffect 중복 실행: Strict Mode에서 마운트/언마운트가 두 번 실행되는 변경사항 주의

결론

당장 프로덕션 적용은 어렵지만, 개발 환경에서 테스트해보니 큰 문제는 없었다. Concurrent Rendering의 이점을 체감하려면 Suspense와 Transition API를 함께 활용해야 할 것 같다. 정식 출시 후 점진적으로 마이그레이션 계획을 세울 예정이다.