React 18 Alpha의 Concurrent Rendering 살펴보기

배경

React 18 Alpha가 발표되면서 Concurrent Rendering이 핵심 기능으로 소개되었다. 현재 운영 중인 서비스에 어떤 영향이 있을지 미리 파악할 필요가 있어 문서를 훑어봤다.

Concurrent Rendering이란

기존 React는 렌더링을 시작하면 중단 없이 끝까지 진행했다. Concurrent Rendering은 렌더링 작업을 중단하고 재개할 수 있게 만든다. 급한 업데이트(사용자 입력 등)를 먼저 처리하고, 덜 급한 작업은 나중에 처리할 수 있다.

startTransition API

import { startTransition } from 'react';

function handleChange(e) {
  const value = e.target.value;
  
  // 긴급한 업데이트 (즉시 반영)
  setInputValue(value);
  
  // 급하지 않은 업데이트 (나중에 처리)
  startTransition(() => {
    setSearchResults(filterResults(value));
  });
}

검색 인풋 같은 경우, 사용자 타이핑은 즉시 반영하되 검색 결과 렌더링은 낮은 우선순위로 처리할 수 있다.

Suspense for Data Fetching

기존 Suspense는 Code Splitting에만 사용했는데, 데이터 fetching에도 사용 가능해진다고 한다. 다만 아직 공식 data fetching 라이브러리가 없어서 실제 도입은 시간이 걸릴 것 같다.

마이그레이션 고려사항

React 18은 기본적으로 하위 호환을 유지한다고 하지만, Concurrent 기능을 활용하려면 코드 수정이 필요하다. 특히 useEffect 내부의 cleanup 함수를 제대로 작성하지 않은 코드는 문제가 될 수 있다.

당장 마이그레이션 계획은 없지만, 향후 성능 개선이 필요한 페이지에서 startTransition을 활용해볼 만하다고 판단했다.