React 18 beta의 Concurrent Rendering 미리보기

배경

지난주 React 18 Working Group이 공개되면서 Concurrent Rendering 관련 문서들이 올라오기 시작했다. 당장 프로덕션에 적용할 수 있는 건 아니지만, 미리 파악해두면 좋을 것 같아 실험용 브랜치를 만들어 테스트해봤다.

startTransition

가장 눈에 띄는 건 startTransition API다. 긴급하지 않은 상태 업데이트를 표시할 수 있다.

import { startTransition } from 'react';

function SearchResults() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);

  const handleChange = (e) => {
    setQuery(e.target.value);
    startTransition(() => {
      setResults(searchData(e.target.value));
    });
  };

  return (
    <div>
      <input value={query} onChange={handleChange} />
      <ResultList items={results} />
    </div>
  );
}

입력 필드는 즉시 반응하고, 검색 결과는 지연돼도 괜찮다는 걸 React에게 알려준다. 실제로 타이핑할 때 끊김 현상이 줄어드는 걸 체감할 수 있었다.

Suspense 변경점

기존에는 code-splitting에만 제한적으로 쓰이던 Suspense가 data fetching에서도 작동한다. 다만 아직 SWR이나 React Query 같은 라이브러리들이 공식 지원하지 않아서 직접 구현해야 했다.

function ProfilePage() {
  return (
    <Suspense fallback={<Spinner />}>
      <UserProfile />
      <UserPosts />
    </Suspense>
  );
}

현재 판단

아직 beta도 나오지 않은 상태라 프로덕션 적용은 이르다. 하지만 Concurrent Mode 대신 점진적으로 도입할 수 있는 Concurrent Features로 방향을 잡은 건 좋은 선택으로 보인다. 올해 말이나 내년 초쯤 안정화되면 대시보드 같은 무거운 페이지부터 적용해볼 예정이다.