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

React 19

📌 Brief Summary

React 19는 UI의 반응성을 높이고 성능 최적화를 자동화하는 데 중점을 둔 React의 주요 업데이트 버전입니다 [1, 2]. 이 버전은 빌드 타임에 자동으로 메모이제이션을 수행하는 React Compiler를 도입하여 개발자의 수동 최적화 부담을 크게 줄여줍니다 [3, 4]. 또한, 모든 컴포넌트를 기본적으로 서버 컴포넌트(Server Components)로 처리하여 클라이언트 측 자바스크립트 번들 크기를 획기적으로 줄이고 렌더링 효율을 높이는 패러다임의 전환을 가져왔습니다 [5, 6].

📖 Core Content

• React Compiler (자동 메모이제이션): React 19 이상 환경에서 작동하는 React Compiler는 코드의 추상 구문 트리(AST)를 분석하여 데이터 흐름을 추적하고, 반응형 값과 정적 값을 스스로 구분합니다 [3, 4]. 결과적으로 useMemo, useCallback, React.memo와 같은 수동 메모이제이션 래퍼 없이도 자동으로 최적화 경계를 삽입해 불필요한 리렌더링 연쇄를 방지합니다 [3, 7, 8].
• 동시성 렌더링(Concurrent Rendering) 강화: useTransition과 [[useDeferredValue|useDeferredValue]] 같은 훅을 제공하여, 긴급한 UI 업데이트(사용자 입력 등)와 비긴급 업데이트(대용량 리스트 필터링 등)의 우선순위를 분리합니다 [2]. 이를 통해 무거운 연산이 메인 스레드를 블로킹하는 것을 방지하고 애플리케이션의 반응성(INP 등)을 최적의 상태로 유지합니다 [1, 9].
• 서버 컴포넌트(RSC)의 기본화: React 19에서는 모든 컴포넌트가 기본적으로 서버 컴포넌트로 동작합니다 [5]. 상호작용이 필요하여 브라우저에서 실행되어야 하는 경우에만 최상단에 "use client" 지시어를 명시해 클라이언트 컴포넌트로 선언합니다 [5]. 서버 컴포넌트는 클라이언트로 전송되는 JS 번들 크기를 없애고, 하이드레이션(Hydration) 단계를 생략하게 해 초기 로딩 속도와 성능을 대폭 향상시킵니다 [10-13].
• 데이터 패칭 및 상태 관리의 진화: 서버 컴포넌트는 브라우저를 거치지 않고 서버 환경에서 직접 데이터베이스나 파일 시스템에 접근하여 데이터를 가져올 수 있습니다 [14]. 또한 useOptimistic, useAction[[State|State]], 프로미스를 직접 다루는 use 훅 등을 통해 데이터 패칭 및 비동기 상태 관리를 한층 더 효율적으로 수행할 수 있도록 지원합니다 [15].

🔗 Knowledge Connections

• Related Topics: React Compiler, React Server Components (RSC), Concurrent Rendering, useTransition, useDeferredValue
• Projects/Contexts: Frontend Performance Optimization, Next.js App Router
• Contradictions/Notes: React 19의 React Compiler가 수동 메모이제이션 작업의 90% 이상을 자동으로 처리하지만, 타사 라이브러리와의 통합이나 명시적 제어가 필요한 이펙트 의존성 관리를 위해서는 여전히 useMemo나 useCallback을 수동으로 사용하는 예외 수단(Escape Hatch)이 필요할 수 있습니다 [16-18].

---

Last updated: 2026-04-25