# [[React Compiler]]

## 📌 Brief Summary
React Compiler(과거 명칭 React Forget)는 Meta에서 개발하여 2025년 10월에 안정화된 React 애플리케이션용 빌드 타임 최적화 도구입니다 [1, 2]. 개발자가 수동으로 작성하던 메모이제이션(`React.memo`, `useMemo`, `useCallback`) 로직을 빌드 단계에서 분석하여 자동으로 삽입함으로써 불필요한 리렌더링을 방지합니다 [1, 3]. 이를 통해 프론트엔드 코드의 가독성을 높이고 유지보수성을 향상시키며, INP(Interaction to Next Paint)와 같은 렌더링 성능 지표를 효과적으로 개선할 수 있습니다 [1, 4, 5].

## 📖 Core Content

**작동 원리 및 주요 특징**
*   **세밀한 자동 최적화:** React Compiler는 전체 컴포넌트를 감싸는 기존 방식과 달리, 개별 JSX 엘리먼트와 내부 계산 로직 등 훨씬 세밀한(Granular) 수준에서 렌더링 결과를 캐싱하여 입력값이 변경되지 않으면 재사용합니다 [4, 6].
*   **도구 생태계 통합:** Babel 플러그인 형태로 구현되어 Vite, Next.js, Rsbuild와 같은 현대적인 빌드 도구와 쉽게 통합할 수 있습니다 [7, 8]. React 19에 최적화되어 있으나 React 17 및 18 버전에서도 사용할 수 있습니다 [9].
*   **React Developer Tools 지원:** React Developer Tools (v5.0 이상)의 Components 및 Profiler 탭을 통해 컴파일러가 성공적으로 처리한 컴포넌트에는 'Memo ✨' 배지가 표시되어 동작 여부를 시각적으로 확인할 수 있습니다 [8, 10].

**주요 장점**
*   **클린 코드 및 유지보수성 (Clean Code):** 메모이제이션을 위한 불필요한 래퍼(wrapper) 코드를 제거하여 소스 코드가 직관적이고 깔끔해지며, 개발자가 수동으로 종속성 배열을 관리할 때 발생할 수 있는 휴먼 에러를 원천 차단합니다 [3-5, 7].
*   **입증된 프로덕션 성능:** Meta의 Instagram, Quest Store를 비롯해 Sanity Studio, Wakelet 등의 프로덕션 환경에서 렌더링 성능 향상, 로딩 속도 감소 및 최대 30%에 이르는 INP 개선을 기록했습니다 [5].

**한계 및 도입 시 고려사항**
*   **React 규칙(Rules of React)의 엄격한 준수 필요:** 컴파일러는 정적 분석을 기반으로 작동하므로, 상태 불변성이나 렌더링 중 부수 효과 금지 같은 React의 핵심 규칙을 지켜야만 최적화가 이뤄집니다. 이를 강제하기 위해 `eslint-plugin-react-hooks` 사용이 강력히 권장됩니다 [9, 11, 12].
*   **라이브러리 호환성 문제:** 매 렌더링마다 새로운 객체 참조를 반환하는 일부 서드파티 훅(예: TanStack Query의 `useMutation()`, React Router의 `useLocation()`)을 사용할 경우 메모이제이션 체인이 끊어져 성능 최적화가 제한될 수 있습니다 [12, 13].
*   **디버깅의 난해함:** 컴파일러가 블랙박스처럼 동작하므로, 의도치 않은 리렌더링 발생 시 소스 코드상에서 원인을 찾기 어려우며 Profiler 도구에 크게 의존해야 합니다 [14].
*   **레거시 프로젝트의 기술 부채:** React 규칙 위반이 잦은 오래된 대형 코드베이스에 적용하려면 상당한 리팩토링 비용이 발생할 수 있습니다 [12, 15]. 

## 🔗 Knowledge Connections
- **Related Topics:** [[Memoization]], [[Performance Optimization]], [[Clean Code]], [[Rules of React]], [[Vite]]
- **Projects/Contexts:** [[Frontend Scalable Architecture]], [[Legacy Codebase Refactoring]]
- **Contradictions/Notes:** React Compiler를 적용하면 대부분의 `React.memo`는 중복되어 제거할 수 있지만 [15], 서드파티 라이브러리 호환성 문제나 컴파일러가 자동으로 처리하지 못하는 특정 엣지 케이스에서는 여전히 명시적인 제어를 위해 `useMemo`와 `useCallback`을 병행해야 한다고 소스는 지적합니다 [12, 16].

---
*Last updated: 2026-04-26*