React 컴파일러

1. React 컴파일러가 뭔가?

• 빌드 시점에 React 코드를 자동으로 최적화하는 도구
• 개발자가 직접 작성하던 메모이제이션을 상당 부분 대신함
• 목적은 불필요한 리렌더링과 반복 계산을 줄이는 것

“쉽게 말하면 useMemo, useCallback, React.memo를 개발자가 일일이 적용하던 일을 컴파일러가 자동으로 해줍니다.”

2. 메모이제이션이 뭔가?

• 이전 계산 결과를 저장했다가 같은 조건에서 재사용하는 것
• 계산과 렌더링을 반복하지 않게 해 성능을 개선함

“같은 계산을 또 하지 말고, 전에 구한 결과를 재사용하는 방식입니다.”

3. 기존 방식은 뭐가 문제였나?

기존에는 개발자가 직접 사용해야 했음.

• 계산 결과: useMemo
• 함수: useCallback
• 컴포넌트: React.memo

문제점:

• 코드가 복잡해짐
• 의존성 배열을 관리해야 함
• 빠뜨리거나 잘못 쓰기 쉬움
• 사용해도 새 객체나 함수가 만들어지면 최적화가 깨질 수 있음

4. 코드에서 짚을 부분

<Item onClick={() => handleClick(item)} />

• handleClick을 useCallback으로 감싸도
• 바깥의 화살표 함수는 렌더링마다 새로 생성됨
• Item이 새로운 onClick을 받았다고 판단할 수 있음
• 따라서 수동 메모이제이션은 적용만 한다고 끝이 아님

“최적화를 했다고 생각했지만 함수 하나 때문에 메모이제이션이 깨질 수 있습니다.”

5. 컴파일러를 사용하면 뭐가 달라지나?

• 평범한 React 코드로 작성하면 됨
• 컴파일러가 의존 관계를 분석함
• 변경되지 않은 값과 JSX를 재사용함
• 필요한 부분만 다시 렌더링함

따라서 다음 코드가 줄어듦.

useMemo
useCallback
React.memo

6. 구체적으로 무엇을 최적화하나?

두 가지만 말하면 됨.

불필요한 리렌더링 방지

• 부모의 State가 바뀌면 자식들도 함께 렌더링될 수 있음
• 컴파일러가 변경과 관련 없는 자식의 결과를 재사용함
• 이를 공식문서에서는 세밀한 반응성이라고 표현함

비용이 큰 계산 재사용

const data = processLargeArray(items);

• items가 바뀌지 않았다면 계산 결과를 재사용할 수 있음
• 컴포넌트나 Hook 내부에서 실행되는 계산이 대상임

7. 한계는 뭔가?

이건 꼭 말하기.

• 모든 일반 함수를 자동으로 캐싱하는 것은 아님
• 컴포넌트와 Hook을 중심으로 최적화함
• 캐시는 여러 컴포넌트 사이에서 공유되지 않음
• 실제 병목은 프로파일링으로 확인해야 함
• React의 규칙을 어긴 코드를 알아서 고쳐주는 도구는 아님

8. 그러면 useMemo와 useCallback은 이제 안 쓰나?

완전히 없어지는 것은 아님.

• 새 코드: 우선 컴파일러에 맡김
• 참조를 직접 고정해야 하는 경우: 계속 사용 가능
• Effect 의존성을 정밀하게 관리할 때 사용할 수 있음
• 기존 코드: 일괄 삭제하지 말고 테스트 후 제거

“기본 최적화는 컴파일러에 맡기고, 개발자가 직접 제어해야 하는 부분에서만 수동 메모이제이션을 사용합니다.”

9. 실제로 사용해도 되나?

• 현재 안정화된 상태
• 프로덕션에서도 사용되고 있음
• 기존 프로젝트에는 점진적으로 적용하는 것이 안전함
• React의 규칙을 잘 지키는 코드일수록 안전하게 최적화됨

10. 지원 환경

• Babel
• Vite
• Metro
• Rsbuild
• Next.js
• React 17·18·19 호환 가능

마지막 결론

이 문장 읽고 끝내면 됨.

“React 컴파일러는 불필요한 리렌더링과 반복 계산을 자동으로 줄여 개발자가 수동 메모이제이션에 쓰던 부담을 줄여줍니다. 다만 모든 성능 문제를 해결하는 도구는 아니므로, 실제 병목은 프로파일링하고 필요한 경우에는 기존 메모이제이션을 계속 사용해야 합니다.”

예상 질문

Q. useMemo와 useCallback은 이제 필요 없나요?
A. 일반적인 최적화에는 덜 필요하지만, 참조를 직접 제어해야 할 때는 여전히 사용합니다.

Q. 컴파일러가 코드를 직접 수정하나요?
A. 원본 코드를 고치는 것이 아니라 빌드 과정에서 최적화된 코드를 생성합니다.

Q. 모든 함수를 메모이제이션하나요?
A. 아닙니다. React 컴포넌트와 Hook 내부의 계산을 중심으로 최적화합니다.

Q. 무조건 성능이 좋아지나요?
A. 불필요한 렌더링은 줄일 수 있지만 실제 효과는 앱 구조에 따라 다릅니다.

Q. 기존 useMemo를 전부 지워도 되나요?
A. 안 됩니다. 기존 동작과 컴파일 결과가 달라질 수 있으므로 테스트하면서 제거해야 합니다.