핵심 요약 (Summary)
React 19와 Next.js 16의 등장으로 React Compiler가 공식 채택되었습니다. 이 컴파일러는 빌드 타임에 코드 전체를 분석해 불필요한 리렌더링을 자동으로 방지합니다. 개발자가 일일이 useMemo, useCallback, React.memo를 추가하던 방식은 이제 컴파일러의 역할로 넘어갔습니다. 기존에 작성된 메모이제이션 코드가 즉각 문제가 되는 것은 아니지만, 새로 작성하는 코드에서는 이 도구들에 의존하지 않아도 됩니다.
왜 이런 변화가 생겼나요? (Why)
React는 오랫동안 "성능 최적화는 개발자의 몫"이라는 철학 위에 있었습니다. 부모 컴포넌트가 리렌더링되면 자식 컴포넌트도 함께 리렌더링되는 것이 기본 동작이고, 이를 막으려면 React.memo, useCallback, useMemo를 적절한 시점에 직접 추가해야 했습니다.
문제는 이 세 가지 도구를 제대로 쓰기 위해 배워야 할 내용이 적지 않다는 점이었습니다. 의존성 배열을 잘못 작성하면 최적화가 전혀 이루어지지 않거나, 오히려 오래된 값을 참조해 버그가 생겼습니다. React.memo만 적용하고 useCallback을 빠뜨리면 함수 참조가 매번 새로 생성되면서 React.memo의 효과가 사라지기도 했습니다. 언제 써야 하고 언제 쓰지 말아야 하는지에 대한 판단 자체가 팀마다 달랐습니다.
React 팀은 이 문제를 "React Forget"이라는 이름으로 오랜 기간 연구해 왔습니다. 그 결과가 React 19에서 공식 포함된 React Compiler입니다.
React Compiler는 빌드 타임에 전체 컴포넌트 트리를 분석합니다. 어떤 값이 실제로 변경되는지, 어떤 함수가 렌더링마다 다시 생성될 필요가 없는지를 컴파일러 수준에서 판단하고, 자동으로 최적화된 코드를 생성합니다. 개발자가 useMemo와 useCallback으로 감싸지 않아도 컴파일러가 동일한 수준의 메모이제이션을 빌드 시 적용해 줍니다.
Next.js 16은 React 19를 기본 런타임으로 채택하면서 React Compiler를 프레임워크 레벨에서 통합했습니다. 별도의 설정 없이도 새로 작성하는 컴포넌트에 컴파일러 최적화가 적용됩니다.
실무에서 이것이 의미하는 바는 세 가지입니다.
첫째, 새로 작성하는 코드에 useMemo, useCallback, React.memo를 습관적으로 추가할 필요가 없습니다. 컴파일러가 이미 판단하기 때문에 오히려 개발자가 직접 추가한 메모이제이션과 중복되거나 충돌할 수 있습니다.
둘째, 기존 코드베이스에 이미 작성된 메모이제이션 코드는 즉시 제거하지 않아도 됩니다. React Compiler는 개발자가 명시적으로 작성한 useMemo, useCallback을 무시하지 않습니다. 다만 컴파일러가 이미 동일한 최적화를 적용하고 있기 때문에 중복된 상태가 됩니다.
셋째, 컴파일러가 모든 경우를 완벽하게 처리하는 것은 아닙니다. React의 규칙인 불변성과 순수 함수 원칙을 위반하는 코드는 컴파일러가 안전하게 최적화할 수 없어 해당 컴포넌트는 최적화 대상에서 제외됩니다. 컴파일러를 온전히 활용하려면 코드가 React의 규칙을 따르고 있어야 합니다.
정리 (Conclusion)
React Compiler의 핵심은 "성능 최적화에 대한 판단을 개발자에서 빌드 도구로 옮겼다"는 것입니다.
이전까지는 리렌더링을 줄이기 위해 useMemo, useCallback, React.memo를 언제 써야 하는지, 어떻게 짝을 맞춰야 하는지를 개발자가 이해하고 직접 적용해야 했습니다. Next.js 16과 React 19 환경에서는 컴파일러가 빌드 시 전체 코드를 분석하고 그 판단을 대신합니다.
개발자가 해야 할 일은 달라집니다. 메모이제이션 코드를 추가하는 것이 아니라, 컴파일러가 올바르게 작동할 수 있도록 React의 규칙을 지키면서 코드를 작성하는 것이 중심이 됩니다.
당장 기존 코드에서 useCallback을 모두 제거할 필요는 없습니다. 하지만 새로 시작하는 프로젝트라면 메모이제이션 코드 없이 컴파일러에 맡기는 방식으로 접근하는 것이 합리적입니다.