React 17 프로젝트에 Concurrent Mode 실험해본 후기

배경

대시보드 페이지에서 필터 변경 시 렌더링이 느려지는 문제가 있었다. 데이터 테이블과 차트가 동시에 업데이트되면서 UI가 버벅이는 현상이었다. React 18이 아직 정식 출시 전이지만, Concurrent Mode를 실험적으로 테스트해볼 가치가 있다고 판단했다.

적용 과정

먼저 실험용 브랜치에서 experimental 버전을 설치했다.

npm install react@experimental react-dom@experimental

ReactDOM.render를 createRoot로 변경하고, 필터 입력 부분에 useTransition을 적용했다.

const [isPending, startTransition] = useTransition();

const handleFilterChange = (value) => {
  setInputValue(value); // 즉시 반영
  startTransition(() => {
    setFilterValue(value); // 낮은 우선순위
  });
};

입력 필드는 즉시 업데이트되고, 무거운 테이블 렌더링은 지연시켰다. isPending 상태로 로딩 UI도 표시할 수 있었다.

결과

체감 성능이 확실히 개선됐다. 입력이 끊기지 않고 부드러워졌고, 사용자는 필터 변경 중에도 다른 작업을 할 수 있었다.

다만 몇 가지 주의점이 있었다:

• 아직 experimental이라 프로덕션 적용은 보류
• 기존 라이브러리 중 일부 호환성 이슈 확인
• Suspense와 함께 사용할 때 의도치 않은 fallback 노출

정리

React 18 정식 출시를 기다리며 미리 학습해두는 것은 유용했다. Concurrent 렌더링 개념을 이해하면 현재 프로젝트에서도 렌더링 최적화 방향을 더 명확히 잡을 수 있다. 올해 하반기쯤 정식 버전이 나오면 바로 적용할 계획이다.