Antigravity Agent
24 lines
4.2 KiB
Markdown
24 lines
4.2 KiB
Markdown
# [[React Compiler|React Compiler]]
|
|
|
|
## 📌 Brief Summary
|
|
React Compiler는 개발자가 수동으로 적용해야 했던 메모이제이션(memoization) 작업을 빌드 타임에 자동으로 처리해 주는 React의 새로운 최적화 도구이다 [1-3]. 기존의 `useMemo`, `useCallback`, `React.memo`와 같은 수동 메모이제이션의 번거로움과 오류 발생 가능성을 없애주며, 일반 [[JavaScript|JavaScript]]와 React의 규칙(Rules of React)을 이해하여 작동하므로 기존 코드를 재작성할 필요가 없다 [1, 4, 5]. 2025년 말에 안정화(stable) 버전으로 출시되었으며, 데이터 흐름을 분석하여 필요한 곳에만 지능적으로 메모이제이션을 삽입함으로써 애플리케이션의 렌더링 성능을 극대화한다 [3, 5, 6].
|
|
|
|
## 📖 Core Content
|
|
* **작동 방식 및 아키텍처:**
|
|
React Compiler는 빌드 단계에서 동작하는 정적 분석 도구로, Babel 또는 SWC 플러그인 형태로 작동한다 [7, 8]. 작동 과정은 크게 세 단계로 나뉜다. 첫째, 컴포넌트 코드를 추상 구문 트리(AST, Abstract Syntax Tree)로 파싱하고 데이터 흐름을 분석하는 '분석([[Analysis|Analysis]]) 단계', 둘째, 값이 정적인지, props나 상태에 의존하는 반응형(reactive)인지, 파생된 값인지 판별하는 '추론(Inference) 단계', 셋째, 최적의 지점에 메모이제이션 경계를 삽입하는 '변환(Transformation) 단계'이다 [9, 10].
|
|
* **세밀한 반응성(Fine-Grained Reactivity):**
|
|
컴파일러는 표현식 수준에서 메모이제이션을 수행하여, 특정 입력이 변경될 때만 컴포넌트가 리렌더링되도록 한다 [9, 11]. 이를 통해 연쇄적인 리렌더링(cascading re-renders)을 방지하고 불필요하고 비용이 많이 드는 계산을 건너뛰게 만들어 준다 [11, 12].
|
|
* **도입 효과 및 실제 사례:**
|
|
Meta의 내부 테스트 결과 초기 로드 시간 12% 단축, 사용자 상호작용 속도 2.5배 향상, 리렌더링 횟수 60% 감소 효과를 보였다 [13]. 콘텐츠 에디터인 [[Sanity Studio|Sanity Studio]]는 렌더링 시간을 20~30% 단축했으며, Wakelet은 LCP를 25%, INP를 47% 향상시켰다 [14, 15]. 이는 수동 메모이제이션에서 발생하는 인지적 과부하, 과도한 메모이제이션, 의존성 배열 오류 등의 문제를 해결하면서 얻은 괄목할 만한 성능 개선이다 [4].
|
|
* **설정 및 점진적 도입:**
|
|
[[React 19|React 19]] 이상, Node.js 18+ 환경에서 사용 가능하며 Vite, Next.js(15.3.1 이상), Expo 등 주요 빌드 도구 및 프레임워크와 호환된다 [7, 16]. 기존 코드베이스에서는 한 번에 모든 것을 바꾸기보다 특정 디렉터리부터 시작하거나 컴포넌트 파일 상단에 `'use compiler'` 지시어를 추가하여 점진적으로 도입하는 전략이 권장된다 [17, 18]. ESLint 플러그인(`eslint-plugin-[[React-Hooks|React-Hooks]]`)을 활용해 컴파일러에 적합하지 않은 코드를 사전에 점검할 수도 있다 [18, 19].
|
|
* **주의사항 및 예외 처리:**
|
|
React Compiler는 렌더링 중 발생하는 부수 효과(side effects)나 외부 변형(external mutation)을 지원하지 않으므로, React의 규칙을 철저히 준수해야 한다 [19-21]. 컴파일러가 최적화할 수 없는 패턴에 직면하면 컴파일을 포기(Bailout)하고 기존의 표준 React 동작으로 돌아간다 [21, 22].
|
|
|
|
## 🔗 Knowledge Connections
|
|
- **Related Topics:** Memoization, Abstract Syntax Tree (AST), Fine-Grained Reactivity, Rules of React, Re-render Cascade
|
|
- **Projects/Contexts:** [[React 19|React 19]], Babel, SWC, [[Next.js|Next.js]], Vite
|
|
- **Contradictions/Notes:** React Compiler가 모든 수동 메모이제이션을 완벽히 대체하는 것은 아니다. 90% 이상의 최적화 작업을 자동으로 수행하지만 [2], 이펙트 의존성(effect dependency)을 제어해야 하거나 참조 안정성(stable [[Reference|Reference]]s)을 요구하는 특정 서드파티 라이브러리(예: TanStack Query의 `useMutation()`)와 연동할 때는 여전히 개발자가 `useMemo`와 `useCallback`을 사용한 수동 제어를 병행해야 한다고 소스들은 명시하고 있다 [23-26].
|
|
|
|
---
|
|
*Last updated: 2026-04-25* |