React 18 정리 - Concurrent Rendering과 실무 포인트

React 18은 Concurrent Rendering과 자동 배칭, Suspense 개선 등을 통해 UI를 더 부드럽게 만들고, 서버 렌더링을 강화한 버전입니다.
Next.js 13+ / 16 같은 프레임워크에서도 React 18 기능을 전제로 설계되어 있기 때문에, 핵심 개념은 꼭 알고 있어야 합니다.

---

1. 자동 배칭(Automatic Batching)

이전 버전에서는 이벤트 핸들러 안에서만 setState가 자동 배칭되었지만, React 18부터는 비동기 코드 전반에서 자동으로 배칭이 동작합니다.

setTimeout(() => {
  setCount((c) => c + 1);
  setFlag((f) => !f);
  // React 18부터는 한 번의 렌더링으로 묶어서 처리
}, 1000);

• 장점: 불필요한 렌더링 감소 → 성능 향상
• 실무에서는 렌더 횟수에 의존하는 로직(예: 로그) 작성 시 주의

---

2. Concurrent Rendering 개념

Concurrent Rendering은 “렌더링을 쪼개서 더 유연하게 처리하는 모드” 정도로 이해하면 됩니다.

• React가 무거운 작업을 한 번에 끝까지 밀어붙이지 않고,
  사용자 입력, 애니메이션 등 긴급한 업데이트를 먼저 처리할 수 있도록 스케줄링
• 개발자는 useTransition, Suspense 등을 통해 우선순위를 조절

const [isPending, startTransition] = useTransition();

function handleChange(nextValue: string) {
  // 긴급하지 않은 업데이트를 transition으로 감싼다
  startTransition(() => {
    setSearch(nextValue);
  });
}

• isPending을 사용해 “로딩 중” 상태를 UI에 반영할 수 있습니다.

---

3. Suspense와 데이터 로딩

React 18에서는 Suspense가 데이터 로딩과도 자연스럽게 어울리도록 개선되었습니다.
Next.js 16의 서버 컴포넌트/스트리밍과 함께 사용하는 경우가 많습니다.

import { Suspense } from "react";

 () {
  
  
   ;
}

   () {
   (
    
  );
}