리액트 컴파일러란 무엇인가요?

React 컴파일러는 React 애플리케이션의 성능 최적화 방식에 혁명을 가져올 새로운 실험적 컴파일러입니다.

이 기사를 무료 미디엄 링크에서 팟캐스트 형식으로 읽고 들을 수 있습니다.

컴파일러란 무엇입니까?

간단히 말하면 컴파일러는 하나의 프로그래밍 언어(소스 언어)를 다른 프로그래밍 언어(대상 언어)로 번역하는 프로그램입니다.

컴파일러는 소스 언어를 타겟 언어로 번역합니다

예를 들어 JSX와 TSX는 브라우저가 코드를 이해할 수 있도록 JavaScript(Babel 등을 사용하여)로 컴파일됩니다.

새로운 React 컴파일러가 필요한 이유

제가 들은 주요 이유 중 하나는 성능 최적화입니다.

때때로 React 애플리케이션은 불필요한 재렌더링으로 인해 성능 문제가 발생합니다.
개발자는 암기, 콜백 등을 사용하여 코드를 최적화할 수 있습니다. 하지만 종종 이는 메모 호출로 가득 찬 복잡한 구성 요소로 해석됩니다.

React Compiler 솔루션이란 무엇입니까?

간단히 말하면 React Compiler는 자동으로 코드를 최적화하므로 수동 성능 최적화의 필요성이 줄어듭니다.

결과적으로 React Compiler는 앱 응답성을 향상시켜야 합니다.

자세히 살펴보겠습니다.

리액트 컴파일러란 무엇인가요?

React 컴파일러는 React 18에서 이미 사용할 수 있는 실험용 컴파일러입니다. React 19에서도 선택적 도구이며 앞으로도 그렇게 될 가능성이 높습니다.

React 18에서 React Compiler를 사용하려면 일부 수동 구성이 필요하지만 이미 사용해 볼 수 있습니다.

React Compiler는 React 19 생태계 내에서 작동하도록 설계되었습니다

반응 컴파일러 설치

React Compiler는 Instagram 제작에 사용되지만 베타 버전으로 오픈 소스로 제공되며 React 17에서 사용할 수 있습니다.

컴파일러에는 편집기에서 컴파일러 분석을 보여주는 강력 권장되는 eslint 플러그인이 함께 제공됩니다.

React Compiler를 사용하지 않더라도 eslint 플러그인을 사용할 수 있습니다.

React 컴파일러 상태 점검

React Compiler를 설치하기 전에 호환성을 확인하는 것이 좋습니다.

다음 명령을 실행하세요:

npx react-compiler-healthcheck@beta

아래와 같은 결과를 얻으려면:

Output of npx react-compiler-healthcheck@beta
Output of npx react-compiler-healthcheck@beta

컴파일된 구성 요소의 수가 많을수록 좋습니다. 이것이 성공적으로 최적화할 수 있는 구성 요소의 수입니다.

내 StrictMode가 활성화되어 있지 않지만 이를 활성화하고 준수하면 React 규칙을 따를 가능성이 더 높아집니다.
따라서 활성화된 상태로 유지해야 할 것입니다.

마지막으로, React-compiler-healthcheck는 컴파일러와 호환되지 않는 알려진 라이브러리가 있는지 확인합니다. 나는 아무것도 없지만 MobX는 문제를 일으킬 것입니다. 작동하지 않습니다.

반응 컴파일러 설치

npm을 사용하여 React 컴파일러를 설치합니다.

npx react-compiler-healthcheck@beta

또는 Yarn을 사용하는 경우:

Output of npx react-compiler-healthcheck@beta
Output of npx react-compiler-healthcheck@beta

구성에 eslint 플러그인도 추가해야 합니다. 제 경우에는 .eslintrc.js 파일입니다.

npm install -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta

eslint 플러그인이 올바르게 설정되면 React 규칙에 대한 경고가 표시될 수 있습니다. 현장에서 업데이트하거나 나중에 업데이트할 수도 있습니다.

유일한 차이점은 두 번째 경우 React가 해당 구성 요소 또는 후크 최적화를 건너뛰었다는 것입니다.

이 기사를 무료 미디엄 링크에서 팟캐스트 형식으로 읽고 들을 수 있습니다.

위 내용은 리액트 컴파일러란 무엇인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!