# [[React 컴파일러 (React Compiler)]]

## 📌 Brief Summary
React 컴파일러(React Compiler, 이전 명칭 'React Forget')는 빌드 타임에 React 애플리케이션을 자동으로 최적화해주는 도구이다 [1-4]. 개발자가 수동으로 작성하던 `useMemo`, `useCallback`, `React.memo` 등의 메모이제이션 작업을 컴파일러가 코드를 분석하여 필요한 곳에 자동으로 삽입한다 [2, 3]. 이를 통해 불필요한 리렌더링을 방지하고 코드의 가독성을 높이며, 메모이제이션 누락이나 오용으로 인한 성능 저하를 효과적으로 해결한다 [4-6].

## 📖 Core Content
- **작동 원리**: React 컴파일러는 Babel 또는 SWC 플러그인 형태로 동작하며 빌드 단계에서 코드를 변환한다 [7-9]. Abstract Syntax Tree(AST)를 분석하여 데이터 흐름을 추적하고, 각 값을 정적(Static), 반응형(Reactive), 파생(Derived)으로 분류한 뒤 최적의 위치에 메모이제이션 경계를 자동으로 삽입한다 [1, 10, 11]. 단순히 전체 컴포넌트를 캐싱하는 것을 넘어, 개별 JSX 요소와 내부 계산 작업까지 세밀하게(granular) 최적화하는 것이 특징이다 [12, 13].
- **주요 장점**: 수동 메모이제이션이 유발하는 개발자의 인지적 부담과 '의존성 배열 지옥(Dependency Array Hell)'을 제거하여 코드를 깔끔하게 유지할 수 있다 [2, 6, 13]. 실제 프로덕션 환경(Meta, Sanity Studio, Wakelet 등)에서 적용한 결과 초기 로드 시간 단축, 상호작용 지연 시간(INP) 개선, 리렌더링 횟수 60% 감소 등의 괄목할 만한 성능 향상이 입증되었다 [14-16].
- **단점 및 한계**: 일부 서드파티 라이브러리(예: TanStack Query 등 렌더링마다 의도적으로 새로운 객체를 반환하는 훅)와 호환성 문제가 발생하여 컴파일러의 최적화가 무력화될 수 있다 [17]. 또한, 내부 동작이 블랙박스처럼 처리되어 예기치 않은 리렌더링 발생 시 원인 규명과 디버깅이 더 까다로워질 수 있으며, React의 기본 원칙(Rules of React)을 다수 위반한 레거시 코드베이스에서는 곧바로 도입하기 어렵다 [18-20].
- **도입 및 마이그레이션 전략**: 모든 코드에 일괄 적용할 필요 없이 특정 디렉터리부터 시작하거나 `'use compiler'` 지시어를 사용하여 파일 단위로 점진적인 도입이 가능하다 [21, 22]. 컴파일러 적용 전 ESLint 플러그인을 사용하여 React 규칙 위반 사항을 식별하고 수정하는 것이 적극 권장된다 [18, 22].
- **수동 메모이제이션의 잔존 필요성**: 컴파일러가 대부분의 최적화를 자동으로 처리하지만, 이펙트(Effect)의 의존성 제어나 안정적인 참조가 필수적인 서드파티 라이브러리 연동 등 명시적인 제어가 필요한 상황(Escape Hatch)에서는 여전히 `useMemo` 및 `useCallback`을 사용해야 한다 [23-26]. 

## 🔗 Knowledge Connections
- **Related Topics:** [[메모이제이션 (Memoization)]], [[빌드 타임 최적화 (Build-Time Optimization)]], [[리렌더링 (Re-rendering)]]
- **Projects/Contexts:** [[Meta 프로덕션 앱 (Instagram, Quest Store)]], [[Sanity Studio]], [[Next.js 및 Vite 통합]]
- **Contradictions/Notes:** 소스에 따르면 React 컴파일러가 적용된 컴포넌트는 React DevTools에서 `Memo ✨` 배지가 표시되지만, 이것이 항상 최적화의 성공을 의미하는 것은 아니다 [17, 27]. 속성에 인라인 객체나 함수 등 불안정한 참조가 전달될 경우, 배지가 있더라도 부모 컴포넌트 업데이트 시 여전히 리렌더링이 발생할 수 있으므로 주의해야 한다 [17].

---
*Last updated: 2026-04-25*