2nd/10_Wiki/Topics/React Compiler.md

React Compiler

📌 Brief Summary

React Compiler는 개발자가 수동으로 적용해야 했던 메모이제이션(memoization) 작업을 빌드 타임에 자동으로 처리해 주는 React의 새로운 최적화 도구이다 [1-3]. 기존의 useMemo, useCallback, React.memo와 같은 수동 메모이제이션의 번거로움과 오류 발생 가능성을 없애주며, 일반 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) 단계', 둘째, 값이 정적인지, props나 상태에 의존하는 반응형(reactive)인지, 파생된 값인지 판별하는 '추론(Inference) 단계', 셋째, 최적의 지점에 메모이제이션 경계를 삽입하는 '변환(Transformation) 단계'이다 [9, 10].
• 세밀한 반응성(Fine-Grained Reactivity): 컴파일러는 표현식 수준에서 메모이제이션을 수행하여, 특정 입력이 변경될 때만 컴포넌트가 리렌더링되도록 한다 [9, 11]. 이를 통해 연쇄적인 리렌더링(cascading re-renders)을 방지하고 불필요하고 비용이 많이 드는 계산을 건너뛰게 만들어 준다 [11, 12].
• 도입 효과 및 실제 사례: Meta의 내부 테스트 결과 초기 로드 시간 12% 단축, 사용자 상호작용 속도 2.5배 향상, 리렌더링 횟수 60% 감소 효과를 보였다 [13]. 콘텐츠 에디터인 Sanity Studio는 렌더링 시간을 20~30% 단축했으며, Wakelet은 LCP를 25%, INP를 47% 향상시켰다 [14, 15]. 이는 수동 메모이제이션에서 발생하는 인지적 과부하, 과도한 메모이제이션, 의존성 배열 오류 등의 문제를 해결하면서 얻은 괄목할 만한 성능 개선이다 [4].
• 설정 및 점진적 도입: 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, Babel, SWC, Next.js, Vite
• Contradictions/Notes: React Compiler가 모든 수동 메모이제이션을 완벽히 대체하는 것은 아니다. 90% 이상의 최적화 작업을 자동으로 수행하지만 [2], 이펙트 의존성(effect dependency)을 제어해야 하거나 참조 안정성(stable References)을 요구하는 특정 서드파티 라이브러리(예: TanStack Query의 useMutation())와 연동할 때는 여전히 개발자가 useMemo와 useCallback을 사용한 수동 제어를 병행해야 한다고 소스들은 명시하고 있다 [23-26].

---

Last updated: 2026-04-25