'memo'를 지울 결심: React Compiler가 제안하는 미래

1. React Compiler의 동작 원리

React Compiler는 빌드 타임에 컴포넌트 함수를 분석해 어떤 값이 렌더 간에 변하지 않는지를 추론합니다. 변하지 않는 값에 자동으로 캐싱 로직을 삽입해 불필요한 리렌더와 재계산을 방지합니다. JavaScript의 의미론적 규칙을 따르기 때문에 React 규칙(순수 컴포넌트, Hook 규칙)을 지켜야 컴파일러가 올바르게 동작합니다.

핵심 용어

2. 기존 memo/useMemo/useCallback과의 관계

React Compiler를 사용하면 대부분의 경우 memo(), useMemo(), useCallback()을 직접 작성할 필요가 없습니다. 컴파일러가 자동 삽입하기 때문입니다. 단, 컴파일러가 분석할 수 없는 외부 뮤터블 값(ref.current 직접 조작, 전역 변수 등)을 다루는 경우 수동 메모이제이션이 여전히 필요합니다.

핵심 용어

3. 마이그레이션 전략

eslint-plugin-react-compiler를 먼저 설치해 React 규칙 위반 코드를 찾고 수정합니다. 이후 babel-plugin-react-compiler를 opt-in 모드(디렉터리 단위)로 적용해 점진적으로 확장합니다. 컴파일러가 특정 컴포넌트를 최적화하지 않으려면 `use no memo` 지시어를 사용합니다.

핵심 용어

Q1. React Compiler가 등장한 배경과 기존 메모이제이션의 문제점은 무엇인가요?

힌트

[감점 답변] 정의만 반복하거나 "React Compiler가 등장한 배경과 기존 메모이제이션의 문제점은 무엇인가요?"에 대해 장단점 없이 단편적으로 답하면 감점 포인트입니다. 면접관은 실무 적용 경험이 부족하다고 판단합니다. [좋은 답변] 기존 문제: memo/useMemo/useCallback은 개발자가 직접 의존성 배열을 관리해야 하고, 과하게 쓰면 코드가 복잡해지며, 덜 쓰면 불필요한 리렌더가 발생합니다. React Compiler는 이 판단을 컴파일러가 대신해 개발자의 인지 부하를 줄이는 것이 목적입니다.

Q2. React Compiler가 동작하려면 어떤 조건이 필요한가요?

힌트

[감점 답변] 정의만 반복하거나 "React Compiler가 동작하려면 어떤 조건이 필요한가요?"에 대해 장단점 없이 단편적으로 답하면 감점 포인트입니다. 면접관은 실무 적용 경험이 부족하다고 판단합니다. [좋은 답변] React의 규칙을 지켜야 합니다: (1) 컴포넌트와 Hook은 순수해야 함(같은 입력 → 같은 출력), (2) Hook 규칙 준수, (3) props/state를 직접 뮤테이션하지 않음. 이 조건을 어기면 컴파일러가 해당 컴포넌트를 최적화하지 않거나 잘못된 코드를 생성할 수 있습니다.

Q3. React Compiler를 도입한 후에도 memo()가 필요한 경우가 있나요?

힌트

[감점 답변] 정의만 반복하거나 "React Compiler를 도입한 후에도 memo()가 필요한 경우가 있나요?"에 대해 장단점 없이 단편적으로 답하면 감점 포인트입니다. 면접관은 실무 적용 경험이 부족하다고 판단합니다. [좋은 답변] 컴파일러가 분석할 수 없는 케이스에는 여전히 필요합니다: ref.current를 렌더 중에 읽는 경우, 외부 뮤터블 저장소에 의존하는 경우, 서드파티 라이브러리의 뮤터블 객체를 다루는 경우. 또한 `use no memo` 지시어로 특정 컴포넌트를 컴파일러 최적화 대상에서 제외할 수 있습니다.