리액트 컴파일러

Published at 2025-04-23

TIL - 리액트 컴파일러

날짜: 2025년 4월 23일

리액트 컴파일러?

React는 메모이제이션을 해주는 useMemo, useCallback 등을 제공해서 컴포넌트 리렌더링 최적화를 하도록 한다.

React Compiler는 이와 같은 기능을 수행하는데 useMemo, useCallback와의 차이점은 최적화를 자동으로 해준다는 것이다.

작동 방식

  • 빌드 시점에 코드를 분석
  • 컴포넌트 함수에서 사용된 state, props, 외부 변수를 추적
  • 이를 통해 컴포넌트가 어떤 값에 의존하는지 분석해서 값이 바뀌지 않는다면 렌더링을 스킵하도록 코드 변환

이름의 의미

“컴파일러”라는건 보통 “사람이 쓴 코드를 컴퓨터가 이해할 수 있는 코드로 변환”을 뜻한다.

그럼 “리액트 컴파일러”라는 이름의 의미는?

⇒ 코드를 변환한다는건 똑같지만, 리액트 컴파일러의 목적은 컴퓨터가 이해하기 쉬운 코드로 변환하는게 아닌 “개발자가 작성한 리액트 컴포넌트 → 최적화된 코드로 변환” 이다.

때문에 “리액트 컴파일러”에서 “컴파일러”는 코드 분석 + 코드 변환의 의미라고 보면 이해가 쉽다.

만약 useMemo, useCallback에 개발자가 수동으로 작성한 것과 React Compiler가 분석한 의존성이 동일하다면 결국 빌드된 결과는 동일할 것이다.

때문에 React Compiler가 새로운 개념은 아니다.

현재 React에서는 React Compiler를 선택사항으로 제공하고 있다.

참고 할만한 문서: Understanding React Compiler