React 18 Beta의 Concurrent Rendering 사전 테스트

배경

6월에 React 18 Working Group이 공개되고, 이번 주 React 18 베타가 릴리즈됐다. 당장 프로덕션에 적용할 순 없지만 Concurrent Rendering 기능이 실제로 어떤 효과가 있는지 궁금해서 사내 어드민 프로젝트에 테스트해봤다.

문제 상황

상품 검색 페이지에서 필터링 옵션이 많아지면서 타이핑할 때마다 UI가 버벅이는 현상이 있었다. 약 5000개의 상품 데이터를 클라이언트에서 필터링하는 구조였는데, 검색어 입력과 리스트 렌더링이 동시에 일어나 입력 지연이 발생했다.

기존에는 debounce로 해결했지만, 이것도 결국 UX 타협이었다.

startTransition 적용

import { startTransition, useState } from 'react';

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

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

  const filteredProducts = useMemo(
    () => products.filter(p => p.name.includes(deferredQuery)),
    [deferredQuery]
  );

  return (
    <>
      <input value={query} onChange={handleChange} />
      <ProductList products={filteredProducts} />
    </>
  );
}

입력 값은 즉시 반영하고, 필터링 결과는 startTransition으로 감싸서 우선순위를 낮췄다. 실제로 타이핑 반응성이 확실히 개선됐다.

소감

베타 단계라 프로덕션 적용은 아직 이르지만, Concurrent 모드의 철학이 명확히 느껴졌다. debounce 같은 우회 방법 없이도 프레임워크 레벨에서 우선순위를 조절할 수 있다는 게 인상적이다.

정식 릴리즈는 올해 말~내년 초쯤 예상되는데, 그때쯤 다시 마이그레이션 가이드를 정리해봐야겠다.