React 18 Concurrent 렌더링 완벽 이해

Concurrent 렌더링이란

React 18에서 도입된 Concurrent 렌더링은 UI 업데이트의 우선순위를 구분하여, 사용자 경험을 해치지 않으면서 무거운 작업을 처리합니다.

startTransition

import { startTransition } from "react";

function handleSearch(query) {
  // 즉시 업데이트 (긴급)
  setInput(query);
  // 지연 업데이트 (비긴급)
  startTransition(() => {
    setSearchResults(filterData(query));
  });
}

Suspense와 데이터 페칭

React.lazy와 Suspense를 조합하면 코드 스플리팅과 로딩 상태를 선언적으로 관리할 수 있습니다.