React 18 알파 버전 살펴보기 - Automatic Batching과 Concurrent Features

React 18 알파 발표

지난주 React 18 알파가 발표되었다. 당장 프로덕션에 적용할 순 없지만, 주요 변경사항을 미리 파악해둘 필요가 있어 로컬에서 테스트해봤다.

Automatic Batching

가장 눈에 띄는 변경은 Automatic Batching이다. 기존에는 React 이벤트 핸들러 내부에서만 batching이 동작했다.

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

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

Promise, setTimeout, native 이벤트 핸들러에서도 자동으로 batching이 적용된다. 성능 개선이 기대되는 부분이다.

startTransition

긴급하지 않은 업데이트를 표시할 수 있는 새로운 API다.

import { startTransition } from 'react';

function handleChange(e) {
  setInputValue(e.target.value); // 긴급 업데이트
  
  startTransition(() => {
    setSearchQuery(e.target.value); // 긴급하지 않음
  });
}

검색 input처럼 사용자 입력은 즉시 반영하되, 무거운 필터링 작업은 뒤로 미룰 수 있다. 기존에 debounce로 처리하던 케이스에 적용해볼 만하다.

Suspense 개선

SSR에서 Suspense가 정식 지원된다. 아직 실험 단계지만, 서버 사이드에서 컴포넌트별로 스트리밍 렌더링이 가능해질 것으로 보인다.

마이그레이션 계획

당장은 알파 버전이라 지켜봐야겠지만, 베타나 RC가 나오면 사이드 프로젝트에 먼저 적용해볼 예정이다. 특히 Automatic Batching은 별도 코드 변경 없이 성능 개선을 기대할 수 있을 것 같다.