React 18 알파 버전 주요 변경사항 정리

배경

지난주 React 18 알파 버전이 발표되었다. 기존 프로젝트들의 마이그레이션 가능성을 검토하기 위해 주요 변경사항을 살펴봤다.

주요 변경사항

1. Automatic Batching

기존에는 React 이벤트 핸들러 내부에서만 상태 업데이트가 배칭되었다. 18부터는 Promise, setTimeout 등 비동기 코드에서도 자동으로 배칭된다.

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

// React 18: 한 번만 렌더링

2. Concurrent Rendering

createRoot API를 통해 Concurrent 기능을 활성화할 수 있다. 기존 ReactDOM.render는 레거시 모드로 동작한다.

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

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

3. startTransition API

긴급하지 않은 업데이트를 마킹할 수 있다. 입력 필드와 같이 즉각적인 반응이 필요한 UI와 무거운 렌더링을 분리할 수 있다.

import { startTransition } from 'react';

setInputValue(input);
startTransition(() => {
  setSearchQuery(input);
});

호환성 검토

현재 운영 중인 서비스에서 사용 중인 라이브러리들의 호환성을 확인했다. React Router v6, Redux Toolkit은 문제없었지만, 일부 서드파티 UI 라이브러리에서 경고가 발생했다.

알파 단계라 프로덕션 적용은 시기상조다. 베타나 RC 버전이 나올 때까지 기다리면서 내부 개발 환경에서 테스트를 진행할 예정이다.

참고

• React 18 Working Group 디스커션을 팔로우하면서 추가 변경사항을 모니터링 중이다.
• Suspense for Data Fetching은 아직 실험 단계라 문서화가 부족하다.