본문 바로가기

Frontend#Frontend#React#Performance조회 1

React Compiler란?

정의

수동 memoization 없이도 React 컴포넌트를 자동 최적화하는 컴파일러. useMemo·useCallback·memo가 필요 없어진다.

다른 표현리액트 컴파일러

React Compiler란?

React 팀이 개발한 컴파일러. 코드를 분석해 렌더 최적화가 필요한 곳에 자동으로 메모이제이션을 삽입한다.

효과

useMemo, useCallback, React.memo 수동 호출 불필요
불필요한 리렌더 자동 방지
가독성 향상 + 성능 동등 or 개선

사용

// babel.config.js
plugins: [['babel-plugin-react-compiler']]
// 또는 SWC/Next.js 플러그인

현재

2025년 RC, 2026년 React 19.x에 stable. Next.js 15+에서 기본 활성화 옵션.

📘 관련 기술노트

전체 보기 →

FrontendReact Compiler — 자동 메모이제이션의 미래

🔗 함께 보면 좋은 용어

Frontend 전체 →

웹 접근성. 장애인·모든 사용자가 쓸 수 있게 하는 실천. WCAG 표준.

Google의 엔터프라이즈 프런트엔드 프레임워크. TypeScript 1급. RxJS·DI 기반.

Accessible Rich Internet Applications

HTML 네이티브로 표현 어려운 의미를 속성으로 보강하는 W3C 표준.

요소의 가로/세로 비율을 CSS로 직접 지정하는 속성. 이미지·영상 로드 전 공간 예약.

콘텐츠 중심 사이트에 최적화된 프레임워크. "Islands Architecture"로 기본 0 JS, 필요한 곳만 hydration.

Node·브라우저용 HTTP 클라이언트. fetch 이전 표준. 인터셉터·변환 기능 풍부.