React 18 Alpha 살펴보기 - Concurrent Rendering과 Automatic Batching

배경

지난주 React 18 Alpha가 발표되었다. 2년 넘게 개발해온 Concurrent Mode가 Concurrent Rendering이라는 이름으로 opt-in 형태로 제공된다고 한다. 팀 내에서 도입 가능성을 검토하라는 요청을 받아 주요 변경사항을 정리했다.

주요 변경사항

1. Automatic Batching

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

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

// React 18: 1번 렌더링 (자동 배칭)

2. startTransition

긴급하지 않은 업데이트를 표시하는 API다. 검색 입력 같은 긴급한 업데이트와 결과 렌더링을 분리할 수 있다.

import { startTransition } from 'react';

setInputValue(input); // 긴급
startTransition(() => {
  setSearchQuery(input); // 전환, 중단 가능
});

3. createRoot

새로운 루트 API가 추가되었다. Concurrent 기능을 사용하려면 필수다.

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

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

마이그레이션 고려사항

• 프로덕션 도입은 Beta 이후 고려 예정
• Automatic Batching은 대부분 문제없을 것으로 예상
• useEffect 타이밍 변경이 있을 수 있어 테스트 필요
• Suspense SSR은 아직 실험적 단계

당분간은 관망하되, 사이드 프로젝트에서 먼저 테스트해볼 계획이다.