v19.2Latest

소개

React Compiler는 React 앱을 자동으로 최적화하는 새로운 빌드 타임 도구입니다. 이 도구는 일반 JavaScript와 함께 작동하며,React의 규칙을 이해하므로, 코드를 다시 작성하지 않고도 사용할 수 있습니다.

배울 내용
  • React Compiler의 역할
  • 컴파일러 시작하기
  • 점진적 도입 전략
  • 문제 발생 시 디버깅 및 문제 해결
  • React 라이브러리에서 컴파일러 사용하기

React Compiler는 무엇을 하나요?

React Compiler는 빌드 타임에 React 애플리케이션을 자동으로 최적화합니다. React는 최적화 없이도 종종 충분히 빠르지만, 때로는 앱의 반응성을 유지하기 위해 컴포넌트와 값을 수동으로 메모이제이션해야 합니다. 이 수동 메모이제이션은 지루하고, 실수하기 쉬우며, 유지보수할 추가 코드를 생성합니다. React Compiler는 이 최적화를 자동으로 수행하여 이러한 정신적 부담에서 해방시켜주므로, 기능 개발에 집중할 수 있게 합니다.

React Compiler 이전

컴파일러 없이는 리렌더링을 최적화하기 위해 컴포넌트와 값을 수동으로 메모이제이션해야 합니다:

참고

이 수동 메모이제이션에는 메모이제이션을 깨뜨리는 미묘한 버그가 있습니다:

비록 handleClick이 useCallback으로 감싸져 있더라도, 화살표 함수() => handleClick(item)은 컴포넌트가 렌더링될 때마다 새로운 함수를 생성합니다. 이는Item이 항상 새로운 onClickprop을 받게 되어 메모이제이션을 깨뜨린다는 의미입니다.

React Compiler는 화살표 함수 유무와 관계없이 이를 올바르게 최적화할 수 있으며,Item이 props.onClick이 변경될 때만 리렌더링되도록 보장합니다.

React Compiler 이후

React Compiler를 사용하면 수동 메모이제이션 없이 동일한 코드를 작성합니다:

React Compiler 플레이그라운드에서 이 예제 보기

React Compiler는 최적의 메모이제이션을 자동으로 적용하여 앱이 필요할 때만 리렌더링되도록 보장합니다.

Deep Dive
React 컴파일러가 추가하는 메모이제이션의 종류는 무엇인가요?

컴파일러를 사용해 볼까요?

모든 사람이 React 컴파일러 사용을 시작하도록 권장합니다. 컴파일러는 현재 React에 선택적 추가 기능이지만, 향후 일부 기능은 완전히 작동하기 위해 컴파일러를 필요로 할 수 있습니다.

사용해도 안전한가요?

React 컴파일러는 이제 안정적이며 프로덕션 환경에서 광범위하게 테스트되었습니다. Meta와 같은 회사에서 프로덕션 환경에서 사용되고 있지만, 앱에 컴파일러를 프로덕션에 롤아웃하는 것은 코드베이스의 상태와React 규칙을 얼마나 잘 따랐는지에 따라 달라집니다.

어떤 빌드 도구가 지원되나요?

React 컴파일러는 Babel, Vite, Metro, Rsbuild 등여러 빌드 도구에 설치할 수 있습니다.

React 컴파일러는 주로 핵심 컴파일러를 감싸는 가벼운 Babel 플러그인 래퍼이며, Babel 자체와 분리되도록 설계되었습니다. 컴파일러의 초기 안정 버전은 주로 Babel 플러그인으로 유지되지만, swc 및oxc팀과 협력하여 React 컴파일러에 대한 일급 지원을 구축 중이므로 향후 빌드 파이프라인에 Babel을 다시 추가할 필요가 없을 것입니다.

Next.js 사용자는 v15.3.1이상을 사용하여 swc가 호출하는 React 컴파일러를 활성화할 수 있습니다.

useMemo, useCallback, React.memo는 어떻게 해야 하나요?

기본적으로 React 컴파일러는 분석 및 휴리스틱을 기반으로 코드를 메모이제이션합니다. 대부분의 경우 이 메모이제이션은 작성했을 수 있는 것만큼 정확하거나 더 정확할 것입니다.

그러나 일부 경우 개발자는 메모이제이션에 대한 더 많은 제어가 필요할 수 있습니다.useMemo 및 useCallback훅은 React 컴파일러와 함께 탈출구로 계속 사용될 수 있으며, 어떤 값이 메모이제이션될지 제어할 수 있습니다. 이에 대한 일반적인 사용 사례는 메모이제이션된 값이 효과 의존성으로 사용되어, 의존성이 의미 있게 변경되지 않더라도 효과가 반복적으로 실행되지 않도록 보장하는 경우입니다.

새 코드의 경우, 메모이제이션은 컴파일러에 의존하고 필요한 경우 정밀한 제어를 위해useMemo/useCallback을 사용하는 것을 권장합니다.

기존 코드의 경우, 기존 메모이제이션을 그대로 두거나(제거하면 컴파일 출력이 변경될 수 있음) 메모이제이션을 제거하기 전에 신중하게 테스트하는 것을 권장합니다.

React 컴파일러 사용해 보기

이 섹션은 React 컴파일러를 시작하고 프로젝트에서 효과적으로 사용하는 방법을 이해하는 데 도움이 될 것입니다.

추가 자료

이 문서 외에도, 컴파일러에 대한 추가 정보와 논의를 위해React Compiler 작업 그룹을 확인하는 것을 권장합니다.

上一篇React 컴파일러下一篇설치