# [[React 19|React 19]] ## πŸ“Œ Brief Summary React 19λŠ” UI의 λ°˜μ‘μ„±μ„ 높이고 μ„±λŠ₯ μ΅œμ ν™”λ₯Ό μžλ™ν™”ν•˜λŠ” 데 쀑점을 λ‘” React의 μ£Όμš” μ—…λ°μ΄νŠΈ λ²„μ „μž…λ‹ˆλ‹€ [1, 2]. 이 버전은 λΉŒλ“œ νƒ€μž„μ— μžλ™μœΌλ‘œ λ©”λͺ¨μ΄μ œμ΄μ…˜μ„ μˆ˜ν–‰ν•˜λŠ” [[React Compiler|React Compiler]]λ₯Ό λ„μž…ν•˜μ—¬ 개발자의 μˆ˜λ™ μ΅œμ ν™” 뢀담을 크게 μ€„μ—¬μ€λ‹ˆλ‹€ [3, 4]. λ˜ν•œ, λͺ¨λ“  μ»΄ν¬λ„ŒνŠΈλ₯Ό 기본적으둜 μ„œλ²„ μ»΄ν¬λ„ŒνŠΈ([[Server Components|Server Components]])둜 μ²˜λ¦¬ν•˜μ—¬ ν΄λΌμ΄μ–ΈνŠΈ μΈ‘ μžλ°”μŠ€ν¬λ¦½νŠΈ λ²ˆλ“€ 크기λ₯Ό 획기적으둜 쀄이고 λ Œλ”λ§ νš¨μœ¨μ„ λ†’μ΄λŠ” νŒ¨λŸ¬λ‹€μž„μ˜ μ „ν™˜μ„ κ°€μ Έμ™”μŠ΅λ‹ˆλ‹€ [5, 6]. ## πŸ“– Core Content - **React Compiler (μžλ™ λ©”λͺ¨μ΄μ œμ΄μ…˜):** React 19 이상 ν™˜κ²½μ—μ„œ μž‘λ™ν•˜λŠ” React CompilerλŠ” μ½”λ“œμ˜ 좔상 ꡬ문 트리(AST)λ₯Ό λΆ„μ„ν•˜μ—¬ 데이터 흐름을 μΆ”μ ν•˜κ³ , λ°˜μ‘ν˜• κ°’κ³Ό 정적 값을 슀슀둜 κ΅¬λΆ„ν•©λ‹ˆλ‹€ [3, 4]. 결과적으둜 `useMemo`, `useCallback`, `React.memo`와 같은 μˆ˜λ™ λ©”λͺ¨μ΄μ œμ΄μ…˜ 래퍼 없이도 μžλ™μœΌλ‘œ μ΅œμ ν™” 경계λ₯Ό μ‚½μž…ν•΄ λΆˆν•„μš”ν•œ λ¦¬λ Œλ”λ§ 연쇄λ₯Ό λ°©μ§€ν•©λ‹ˆλ‹€ [3, 7, 8]. - **λ™μ‹œμ„± λ Œλ”λ§([[Concurrent Rendering|Concurrent Rendering]]) κ°•ν™”:** `useTransition`κ³Ό `[[useDeferredValue|useDeferredValue]]` 같은 훅을 μ œκ³΅ν•˜μ—¬, κΈ΄κΈ‰ν•œ UI μ—…λ°μ΄νŠΈ(μ‚¬μš©μž μž…λ ₯ λ“±)와 λΉ„κΈ΄κΈ‰ μ—…λ°μ΄νŠΈ(λŒ€μš©λŸ‰ 리슀트 필터링 λ“±)의 μš°μ„ μˆœμœ„λ₯Ό λΆ„λ¦¬ν•©λ‹ˆλ‹€ [2]. 이λ₯Ό 톡해 무거운 연산이 메인 μŠ€λ ˆλ“œλ₯Ό λΈ”λ‘œν‚Ήν•˜λŠ” 것을 λ°©μ§€ν•˜κ³  μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ˜ λ°˜μ‘μ„±(INP λ“±)을 졜적의 μƒνƒœλ‘œ μœ μ§€ν•©λ‹ˆλ‹€ [1, 9]. - **μ„œλ²„ μ»΄ν¬λ„ŒνŠΈ(RSC)의 κΈ°λ³Έν™”:** React 19μ—μ„œλŠ” λͺ¨λ“  μ»΄ν¬λ„ŒνŠΈκ°€ 기본적으둜 μ„œλ²„ μ»΄ν¬λ„ŒνŠΈλ‘œ λ™μž‘ν•©λ‹ˆλ‹€ [5]. μƒν˜Έμž‘μš©μ΄ ν•„μš”ν•˜μ—¬ λΈŒλΌμš°μ €μ—μ„œ μ‹€ν–‰λ˜μ–΄μ•Ό ν•˜λŠ” κ²½μš°μ—λ§Œ μ΅œμƒλ‹¨μ— `"use client"` μ§€μ‹œμ–΄λ₯Ό λͺ…μ‹œν•΄ ν΄λΌμ΄μ–ΈνŠΈ μ»΄ν¬λ„ŒνŠΈλ‘œ μ„ μ–Έν•©λ‹ˆλ‹€ [5]. μ„œλ²„ μ»΄ν¬λ„ŒνŠΈλŠ” ν΄λΌμ΄μ–ΈνŠΈλ‘œ μ „μ†‘λ˜λŠ” JS λ²ˆλ“€ 크기λ₯Ό μ—†μ• κ³ , ν•˜μ΄λ“œλ ˆμ΄μ…˜([[Hydration|Hydration]]) 단계λ₯Ό μƒλž΅ν•˜κ²Œ ν•΄ 초기 λ‘œλ”© 속도와 μ„±λŠ₯을 λŒ€ν­ ν–₯μƒμ‹œν‚΅λ‹ˆλ‹€ [10-13]. - **데이터 패칭 및 μƒνƒœ κ΄€λ¦¬μ˜ μ§„ν™”:** μ„œλ²„ μ»΄ν¬λ„ŒνŠΈλŠ” λΈŒλΌμš°μ €λ₯Ό κ±°μΉ˜μ§€ μ•Šκ³  μ„œλ²„ ν™˜κ²½μ—μ„œ 직접 λ°μ΄ν„°λ² μ΄μŠ€λ‚˜ 파일 μ‹œμŠ€ν…œμ— μ ‘κ·Όν•˜μ—¬ 데이터λ₯Ό κ°€μ Έμ˜¬ 수 μžˆμŠ΅λ‹ˆλ‹€ [14]. λ˜ν•œ `useOptimistic`, `useAction[[State|State]]`, ν”„λ‘œλ―ΈμŠ€λ₯Ό 직접 λ‹€λ£¨λŠ” `use` ν›… 등을 톡해 데이터 패칭 및 비동기 μƒνƒœ 관리λ₯Ό ν•œμΈ΅ 더 효율적으둜 μˆ˜ν–‰ν•  수 μžˆλ„λ‘ μ§€μ›ν•©λ‹ˆλ‹€ [15]. ## πŸ”— Knowledge Connections - **Related Topics:** [[React Compiler|React Compiler]], React Server Components (RSC), Concurrent Rendering, [[useTransition|useTransition]], [[useDeferredValue|useDeferredValue]] - **Projects/Contexts:** [[Frontend|Frontend]] Performance Optimization, [[Next.js App Router|Next.js App Router]] - **Contradictions/Notes:** React 19의 React Compilerκ°€ μˆ˜λ™ λ©”λͺ¨μ΄μ œμ΄μ…˜ μž‘μ—…μ˜ 90% 이상을 μžλ™μœΌλ‘œ μ²˜λ¦¬ν•˜μ§€λ§Œ, 타사 λΌμ΄λΈŒλŸ¬λ¦¬μ™€μ˜ ν†΅ν•©μ΄λ‚˜ λͺ…μ‹œμ  μ œμ–΄κ°€ ν•„μš”ν•œ μ΄νŽ™νŠΈ μ˜μ‘΄μ„± 관리λ₯Ό μœ„ν•΄μ„œλŠ” μ—¬μ „νžˆ `useMemo`λ‚˜ `useCallback`을 μˆ˜λ™μœΌλ‘œ μ‚¬μš©ν•˜λŠ” μ˜ˆμ™Έ μˆ˜λ‹¨(Escape Hatch)이 ν•„μš”ν•  수 μžˆμŠ΅λ‹ˆλ‹€ [16-18]. --- *Last updated: 2026-04-25*