React 18 Beta의 Concurrent Features 테스트해보기

배경

지난주 React 18 Beta가 공개되면서 Concurrent Features를 사용할 수 있게 됐다. 회사 프로젝트에 바로 적용하기엔 무리가 있어 개인 사이드 프로젝트에서 먼저 테스트해봤다.

createRoot 마이그레이션

기존 ReactDOM.render에서 createRoot로 변경하는 것부터 시작했다.

// Before
import ReactDOM from 'react-dom';
ReactDOM.render(<App />, document.getElementById('root'));

// After
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(<App />);

이것만으로도 Concurrent Rendering이 활성화된다.

startTransition 적용

검색 필터가 많은 대시보드 페이지에서 입력 지연이 있었다. startTransition으로 우선순위를 분리했다.

import { startTransition } from 'react';

const handleSearchChange = (e) => {
  const value = e.target.value;
  setInputValue(value); // 즉시 반영
  
  startTransition(() => {
    setSearchQuery(value); // 낮은 우선순위
  });
};

체감상 입력 반응성이 확실히 개선됐다. 무거운 리스트 렌더링이 입력을 막지 않았다.

useDeferredValue

필터링된 결과 표시에는 useDeferredValue를 사용했다.

const deferredQuery = useDeferredValue(searchQuery);
const filteredItems = useMemo(
  () => items.filter(item => item.name.includes(deferredQuery)),
  [deferredQuery, items]
);

startTransition과 비슷하지만 컴포넌트 경계에서 사용하기 더 편했다.

Suspense 개선

Data Fetching과 Suspense 통합도 시도했지만, 아직 라이브러리 지원이 부족했다. React Query나 SWR이 업데이트되길 기다려야 할 것 같다.

소감

Concurrent Features는 기존 코드 변경 없이도 동작하지만, 제대로 활용하려면 컴포넌트 구조를 다시 생각해봐야 한다. 내년 상반기쯤 안정화되면 회사 프로젝트에도 적용해볼 계획이다.