2nd/10_Wiki/Topics_Dev/React 18.md

React 18

📌 Brief Summary

React 18은 렌더링 과정을 최적화하여 프론트엔드 성능을 크게 향상시키는 기능을 도입한 주요 버전입니다 [1-3]. 이 버전의 가장 핵심적인 특징은 '자동 일괄 처리(Automatic Batching)'가 기본적으로 활성화되어, 다양한 비동기 작업의 상태 업데이트를 하나로 묶어 처리한다는 점입니다 [3-5]. 이를 통해 불필요한 리렌더링을 방지하고 애플리케이션의 반응성과 전체적인 프레임 속도를 매끄럽게 개선합니다 [2, 6, 7].

📖 Core Content

• 자동 일괄 처리(Automatic Batching)의 전면 적용 React 18 이전에는 onClick이나 onChange 같은 React의 네이티브 이벤트 핸들러 내부의 업데이트만 일괄 처리되었습니다 [2, 8, 9]. 하지만 React 18부터는 프로미스(Promises), setTimeout, async/await 함수와 같은 비동기 작업 내에서 발생하는 상태 업데이트까지 출처에 상관없이 자동으로 일괄 처리합니다 [2, 5, 8, 9]. 즉, 빠른 시간 내에 여러 상태 업데이트가 발생해도 DOM을 한 번만 업데이트하여 성능 병목 현상을 방지합니다 [4, 6, 10, 11].

• 가상 DOM(Virtual DOM) Diffing 프로세스 경량화 여러 상태 변화를 한 번의 리렌더링으로 결합함으로써 가상 DOM의 Diffing 작업 횟수 자체가 줄어듭니다 [12]. 또한 React.memo나 useMemo 등을 통해 메모이제이션된 값에 대한 검사 횟수도 줄어들어, 렌더링 주기 당 CPU 작업량이 대폭 감소합니다 [12]. 실제 데이터 집약적인 대시보드를 대상으로 한 벤치마크에 따르면, 자동 일괄 처리를 통해 전체 렌더링 횟수가 약 40% 감소하고 최대 부하 시 프레임 속도가 25% 향상되었습니다 [1, 13].

• 업데이트 우선순위 제어 기능 (startTransition & flushSync) React 18은 렌더링 우선순위를 개발자가 직접 제어할 수 있는 API를 제공합니다 [13].

  • startTransition: 목록 필터링과 같이 무겁고 긴급하지 않은 상태 업데이트를 표시하여, 사용자의 타이핑이나 클릭 같은 긴급한 인터랙션을 차단하지 않도록 양보(yield)합니다 [13, 14].
  • flushSync: 즉각적인 UI 업데이트가 필수적인 경우(예: 상태 변경 직후의 입력 포커스 지정 등), React가 업데이트를 강제로 동기식으로 반영하게 만들어 자동 일괄 처리에서 예외로 둘 수 있습니다 [7, 13-15].

🔗 Knowledge Connections

• Related Topics: Automatic Batching, Virtual DOM, startTransition, flushSync
• Projects/Contexts: React Performance Optimization
• Contradictions/Notes: 소스에 따르면 flushSync를 사용해 자동 일괄 처리를 막을 수 있지만, 이를 남용하면 일괄 처리로 얻을 수 있는 성능 이점이 무효화될 수 있으므로 꼭 필요한 경우에만 제한적으로 사용해야 합니다 [7, 16].

---

Last updated: 2026-04-25