Builder.shin

React 18 Alpha의 Concurrent Rendering 테스트해보기

배경

지난주 React 18 Alpha가 공개되었다. 가장 눈에 띄는 변화는 Concurrent Rendering이다. 사내 대시보드에서 대량의 데이터를 렌더링할 때 입력 지연이 발생하는 문제가 있어, 이 기능을 테스트해보기로 했다.

기존 문제

검색어 입력 시 5000개 이상의 행을 필터링하면서 UI가 버벅이는 현상이 있었다. debounce를 적용했지만 근본적인 해결은 아니었다.

const [query, setQuery] = useState('');
const filteredData = data.filter(item => 
  item.name.includes(query)
);

startTransition 적용

React 18의 startTransition을 사용해 필터링 작업의 우선순위를 낮췄다.

import { startTransition } from 'react';

const [query, setQuery] = useState('');
const [deferredQuery, setDeferredQuery] = useState('');

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

const filteredData = data.filter(item => 
  item.name.includes(deferredQuery)
);

결과

입력 필드는 즉시 반응하고, 리스트 업데이트는 약간 지연되지만 타이핑이 막히지 initial. 체감상 확실히 개선되었다.

주의사항

  • Alpha 버전이므로 프로덕션 사용은 보류
  • createRoot로 마운트 방식이 변경됨
  • Suspense for Data Fetching은 아직 실험적 단계

정식 릴리즈 전까지 더 테스트가 필요하지만, Concurrent 기능의 방향성은 명확해 보인다. 내년쯤 실제 프로젝트에 적용할 수 있을 것 같다.

React 18 Alpha의 Concurrent Rendering 테스트해보기