React.js

[React.19] 메모이제이션이 필요 없는 리액트 컴파일러

개발자엄지희 2024. 10. 18. 10:11
반응형

https://junghan92.medium.com/%EB%B2%88%EC%97%AD-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%BB%B4%ED%8C%8C%EC%9D%BC%EB%9F%AC-%EC%82%AC%EC%9A%A9%EB%B2%95-%EC%99%84%EB%B2%BD-%EA%B0%80%EC%9D%B4%EB%93%9C-a6a0e96edc97

 

(번역) 리액트 컴파일러 사용법 — 완벽 가이드

원문: https://www.freecodecamp.org/news/react-compiler-complete-guide-react-19/

junghan92.medium.com

리액트 컴파일러 사용하여 문제 해결하기

다시 말씀드리면, 리액트 컴파일러는 빌드 과정에서 선택적으로 사용할 수 있는 도구입니다. 리액트 19 RC에 번들로 포함되어 있지 않습니다. 필요한 의존성을 설치하고 리액트 19 프로젝트에서 컴파일러를 설정해야 합니다.

컴파일러를 설정하기 전에, 프로젝트 디렉토리에서 다음 명령을 실행하여 코드베이스가 호환되는지 확인할 수 있습니다.

npx react-compiler-healthcheck@experimental

이 명령은 다음 사항을 확인하고 보고합니다.

  • 컴파일러에 의해 최적화될 수 있는 컴포넌트의 수
  • 리액트의 규칙이 준수되고 있는지
  • 호환되지 않는 라이브러리가 있는지

호환성이 확인되면, 리액트 컴파일러가 지원하는 ESLint 플러그인을 설치할 차례입니다. 이 플러그인은 코드에서 리액트 규칙 위반을 감지하는 데 도움을 줍니다. 규칙을 위반하는 코드는 리액트 컴파일러에 의해 건너뛰어지며 최적화되지 않습니다.

npm install eslint-plugin-react-compiler@experimental

그런 다음 ESLint 설정 파일(예: Vite의 경우 .eslintrc.cjs)을 열고 다음 설정을 추가하세요.

module.exports = {
  plugins: [
    'eslint-plugin-react-compiler',
  ],
  rules: {
    'react-compiler/react-compiler': "error",
  },
}

다음으로, 리액트 컴파일러용 바벨 플러그인을 사용하여 프로젝트 전체에 컴파일러를 적용할 수 있습니다. 리액트 19로 새 프로젝트를 시작한다면, 프로젝트 전체에 리액트 컴파일러를 적용하는 것을 추천합니다. 리액트 컴파일러용 바벨 플러그인을 설치해 보겠습니다.

npm install babel-plugin-react-compiler@experimental

설치가 완료되면 바벨 설정 파일에 옵션을 추가하여 설정을 완료해야 합니다. Vite를 사용하고 있으므로 vite.config.js 파일을 열고 내용을 다음 코드 스니펫으로 교체하세요.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

const ReactCompilerConfig = {/* ... */ };
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react({
    babel: {
      plugins: [
        [
          "babel-plugin-react-compiler",
           ReactCompilerConfig
          ]
        ],
    },
  })],
})

여기서 babel-plugin-react-compiler를 설정에 추가했습니다. ReactCompilerConfig는 커스텀 런타임 모듈이나 다른 설정을 제공하고 싶을 때와 같은 고급 설정을 제공하는 데 필요합니다. 이 경우에는 고급 설정 없이 빈 객체로 남겨두었습니다.

이것으로 끝입니다. 리액트 컴파일러의 기능을 활용하기 위해 코드베이스에 설정을 완료했습니다. 이제부터 리액트 컴파일러는 프로젝트의 모든 컴포넌트와 훅을 검토하여 최적화를 적용하려고 시도할 것입니다.

Next.js, Remix, Webpack 등에서 리액트 컴파일러를 설정하고 싶다면, 이 가이드를 참조하세요.

리액트 컴파일러로 최적화된 리액트 앱

이제 리액트 컴파일러를 사용해 최적화된 리액트 앱을 가지게 되었습니다. 그럼, 이전에 했던 것과 같은 테스트를 다시 실행해 보겠습니다. 다시 한번 ProductPage 컴포넌트의 heading 프로퍼티 값을 변경해 보세요.

이번에는 자식 컴포넌트들이 다시 렌더링 되는 것을 보지 못할 것입니다. 따라서 타임스탬프도 업데이트되지 않을 것입니다. 하지만 데이터가 변경된 컴포넌트의 일부분만 변경 사항을 반영하는 것을 볼 수 있을 것입니다. 또한 더 이상 코드에서 memo, useMemo(), 또는 useCallback()을 사용할 필요가 없습니다.

여기서 시각적으로 작동하는 것을 볼 수 있습니다.

리액트 개발자 도구에서의 리액트 컴파일러

리액트 DevTools 버전 5.0 이상은 리액트 컴파일러에 대한 내장 지원을 제공합니다. 리액트 컴파일러에 의해 최적화된 컴포넌트 옆에 Memo ✨ 텍스트가 있는 배지를 볼 수 있습니다. 이는 정말 멋진 기능입니다!

 

 

반응형