React FE

멤버 6 명 [보기] | 전체글 7 개 | 새글 3 개 | 매니저 - 아이오니안

React, NextJS, TypeScript, NodeJS, ORM, Auth, Tailwind, State Management and #ServiceWorker

[트랜드]

React 19 과 React.Compiler

rank 아이오니안 2024-05-30 (목) 22:26 조회 : 305 추천 : 7    

React 19 과 React.Compiler


이 글이 작성되고 있는 2024.05.30 시점에서, React Conference 2024 가 핫합니다. 

컨퍼런스에서는 React 19 이 언제 발표될지 기대를 모으고 있는데요,

RC 2024 에서 지금 가장 핫 한 관심은 React Compiler 인 것 같고, React Compiler 는 가장 핫한 이슈가 되어서 다른 모든 이슈들을 블랙홀처럼 빨아들이고 있는 것 같습니다.


React 19 는, 올 가을 쯤에 정식 공개될 예정으로 알려져 있죠.

Meta 는 이미 몇 달 전에, React 19 에는 React-Compiler 가 포함되지 않는다고, 공식 트윗을 통해 못박아 뒀던 바 있는데요,

그리고 올 연말쯤, 마이너 업그레이드에서 React-Compiler 가 추가될 것으로 예상되고 있었습니다.


하지만 React-Compiler 에 대한 기대가 워낙 커져서 일까요.. RC 2024 에서 사람들의 관심은 React-Compiler 로 쏠리고 있는 것 같습니다.

그래서, React-Compiler 에 관한 제 정보와 생각을 조금이나마 공유해보려고 합니다.




React 에서는 모든 리렌더링을 비용으로 보기도 하죠. 리렌더링과 연산의 무의미한 반복을 피하기 위해 React 18 에서는 메모이제이션 기법을 사용하고 있습니다.

문제는 이게 번거롭기도 하고 가독성을 방해한다는 점인데, 이 때문에 memoization 의 반대되는 개념으로, React.Forget 이라는 아이디어가 등장하기도 했습니다. 리액트의 build.time 에 react.memo 를 알아서 처리해주겠다는 생각이죠.

React.Compiler 가 주목을 받고 있는 데에는 이런 배경이 있었습니다.



React 19 에 React.Compiler 가 포함될지는 아직 아무도 알 수 없습니다.

React.Compiler 는 아직 정식 공개되지 않았지만, React & React-Dom 의 시험 버전은 이미 Meta 에서 가동되고 있으며, 우리도 지금 바로 사용해볼 수 있습니다.


참조문서:

https://react.dev/blog/2024/04/25/react-19-upgrade-guide

https://react.dev/learn/react-compiler




  1. install React.19 RC

npm install react@rc react-dom@rc




Typescript 의 타입 지원 설정 :


// package.json 에 다음을 추가
{
  "dependencies": {
    "@types/react": "npm:types-react@rc",
    "@types/react-dom": "npm:types-react-dom@rc"
  },
  "overrides": {
    "@types/react": "npm:types-react@rc",
    "@types/react-dom": "npm:types-react-dom@rc"
  }
}





  1. Codebase 라이브러리의 호환성 검사

# npx react-compiler-healthcheck@latest

// 이런 추가 인스톨이 필요하다는 프롬프트가 나오면,
Need to install the following packages:
[email protected]
// 'y' 를 쳐줍시다.
Successfully compiled 48 out of 56 components.
StrictMode usage not found.
Found no usage of incompatible libraries.
// incompatible libraries 가 없다면 free to go

react 생태계 모든 라이브러리의 정상작동이 보장되지 않습니다.




  1. EsLint

npm install eslint-plugin-react-compiler

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







  1. 번들러 특화 설정


    1. Babel
    
    npm install babel-plugin-react-compiler
    // babel.config.js
    const ReactCompilerConfig = {  };
    
    module.exports = function () {
      return {
        plugins: [
          ['babel-plugin-react-compiler', ReactCompilerConfig], // must run first!
          // ...
        ],
      };
    };
    
    

    b. vite

    
    // vite.config.js
    const ReactCompilerConfig = {  };
    
    export default defineConfig(() => {
      return {
        plugins: [
          react({
            babel: {
              plugins: [
                ["babel-plugin-react-compiler", ReactCompilerConfig],
              ],
            },
          }),
        ],
        // ...
      };
    });
    
    // Reactt.Compiler 의 옵션 설정
    // 디폴트 설정은 모든 컴포넌트에서 컴파일러 true 입니다.
    // annotation 모드를 설정해주면, 각 컴포넌트에서 use memo 스테이트먼트를 사용할 수 있습니다.
    const ReactCompilerConfig = { 
      compilationMode: "annotation",
    };
    
    
    

    c. Next.js

    
    // Next.js canary, which uses React 19 Release Candidate
    npm install next@canary babel-plugin-react-compiler
    
    // next.config.js
    
    const nextConfig = {
      experimental: {
        reactCompiler: true,
        // 또는
        // reactCompiler: "annotation"
      },
    };
    
    module.exports = nextConfig;
    
    
    

    d. Remix

    ..는 문헌을 참조




컴포넌트에서 React.Compiler 사용:





멤버 6 명 | 전체글 7 개 | 새글 3 개 | 매니저 - 아이오니안

React, NextJS, TypeScript, NodeJS, ORM, Auth, Tailwind, State Management and #ServiceWorker

댓글 2
댓글쓰기
아이오니안글쓴이 2024-06-01 (토) 15:18
게시글의 포맷이 엉망인데,
문제는 아직 별다른 대책이 없다는 점이네요...

채널이 지향하는 관심과 특성상,
게시글에 코드 블럭이 자유롭게 삽입되고 표현되어야만 할 것 같은데,
아무리 고민해도 해결방법을 못 찾겠습니다.
이토랜드의 리치텍스트에디터가 허용하는 포맷이어야 하고, 이토랜드 서버 파서의 검증도 통과해야 한다는 제약이 있네요.

개발자들만 보는 채널이라서, tampermonkey/greasemonkey 스크립트를 통해 유저 스크립트 주입은 가능할 것 같아서 이것도 시도 해봤습니다.
highlight.js 를 유저스크립트로 삽입해 봤는데,
이 역시 안먹히네요... 커스터마이징이 필요한데 제가 못 찾고 있는 것인지 모르겠습니다만, 코드블럭의 레이아웃이 깨지네요.

누군가 좋은 아이디어를 갖고 계시거나, 도움이 될 만한 레퍼런스를 알고 계시면 공유, 제안을 부탁드려 봅니다.
추천 0
엔자임 2024-06-02 (일) 20:42
감사합니다
추천 0

번호 제목 글쓴이 날짜 추천 조회
[공지]  [필독] React FE 채널 규칙  rank아이오니안 05-30 6 223
7 [코드]  #2. npm create vite@latest & first hooks  이미지 rank아이오니안 11:20 2 23
6 [코드]  #1. 리액트를 배우기 위한 사전 준비  이미지 rank아이오니안 11:06 2 24
5 [코드]  React 를 배워봅시다. #0  이미지 rank아이오니안 10:58 2 33
4 [코드]  React Project : zustand-and-useContext  rank아이오니안 06-08 3 114
3 [자유]  개발 초기에는 약간의 중복을 허용하고 추상화를 기다려야 함  (1) 이미지 rank아이오니안 06-03 6 229
2 [트랜드]  React 19 과 React.Compiler  (2) 이미지 rank아이오니안 05-30 7 305
1 [공지]  [필독] React FE 채널 규칙  rank아이오니안 05-30 6 223

공유하기

이토랜드 로고

계정 찾기 회원가입
소셜로그인