출처: https://www.youtube.com/watch?v=4WyLSzwRMGg
본 글은 해당 영상을 ai로 대략 정리해본글을 손수 적으면서 머리에 입력해보는 글입니다. 글보다 영상을 보는걸 추천합니다.
React 컴파일러 1.0: 자동 메모이제이션을 통한 차세대 React 애플리케이션 최적화
1. 서론: React의 새로운 10년을 여는 컴파일러의 등장
25년 10월 리액트 팀은 React 컴파일러 1.0을 정식 출시함
스스로 10년에 걸친 대규모 엔지니어링의 노력의 결실이자 새로운 10년을 여는 출발점이라 평가함
React 컴파일러의 핵심 기능은 빌드 시점에서 자동 메모이제이션을 통해 React앱을 최적화하는 도구로 정의할 수 있음
이는 개발자가 수동으로 처리하던 성능 최적화 작업을 컴파일러가 대신 수행함으로써 개발 패러다임 자체를 근본적으로 바꾼 혁신적인 접근 방식임
2. 기존 React 최적화의 과제: 수동 메모이제이션
React는 상태가 변경될 때 UI를 자동으로 업데이트하는 선언적 렌더링 모델을 기반으로 함
이 과정에서 관련 컴포넌트들이 다시 렌더링 되는데 때로는 상태 변화와 직접적인 관련이 없는 컴포넌트까지 불필요한 리렌더링을 하게 됨
이런 문제를 해결하기위해 메모이제이션 기법을 제공했지만, 개발자가 수동으로 해야했음
함수 메모이제이션: 부모 컴포넌트에서 CountButtons로 전달되는 increment, reset, decrement와 같은 이벤트 핸들러 함수들을 useCallback 훅으로 감싸야 했음
컴포넌트 메모이제이션: CountButtons컴포넌트 자체를 React.memo 고차 컴포넌트로 감싸야 했음 React.memo는 컴포넌트로 전달되는 props가 변경되지 않을 경우 리렌더링을 건너뜀
쏠까말, 어떤 부분을 메모이제이션 하는것까지는 빡세지 않는데 코드 구조가 복잡해지는 문제는 너무 별로 였음
3. React 컴파일러의 혁신: 자동 메모이제이션의 원리와 동작 방식
컴파일러가 코드를 자동으로 분석하여 가장 효율적인 메모이제이션을 적용한것
이를 React DevTools를 통해 시각적으로 확인 가능함
이를 통해 개발자의 인지적 부담을 덜어주고, 전반적으로 개발 생산성과 성능이 올라감
4. React 컴파일러 도입 가이드: 신규 및 기존 프로젝트 적용 방안
신규 프젝 이라면?
Vite, Next.js같은 주요 프레임워크는 앱 생성시 컴파일러 적용 여부를 묻는 옵션을 제공할것
기존 프젝 이라면?
'점진적 도입 가이드'를 통해 쉽게 가능!
1. 패키지 설치:
2. 빌드 설정 구성: vite.config.ts파일에서 컴파일러 플러그인 추가
3. ESLint 규칙 업데이트: eslint-plugin-react-hooks의 recommended및 recommended-latest에 추가되어있음
5. 전략적 활용과 모범 사례: 자동과 수동 메모이제이션 공존
기존에 사용하던 useMemo, useCallback 어케함?
공식 가이드라인에선
- 정확성 및 기본 사용 원칙: 대부분의 경우 React 컴파일러의 자동 메모이제이션이 더 정확할것. 이라고 명시되어있음, 따라서 기존것을 제거하는것을 추천
- 명시적 제어를 위한 보조적 사용: 그래도 컴파일러가 모든 경우를 완벽하게 처리할 순 없음. 개발자가 특정 고비용 연산에 대해 더 정밀한 제얼르 원하거나, 컴파일러의 분석을 보조해야하는 특별한 상황에서는 보조적으로 사용하면 좋음
결국은 왠만하면 다 제거하는데, 살펴보면서 좀 덜된거 같은부분 발견하면 추가해주는 식으로 하면 될거 같아서 크게 차이는 없을지두?
업그레이드 시 주의사항
만약 프로젝트 코드에 React 규칙을 위반하는 부분이 있다면, 컴파일러의 메모이제이션 방식이 변경되며 예기치 않은 동작을 할 수 있음
따라서
- eslin-plugin-react-hooks을 설치해 해당 규칙을 철저히 지키면 좋겠음
이후
더 빠른 빌드를 위한 SWC(Speedy Web Compiler) 지원이 실험적으로 진행중
따라서 속도가 더 빨라질 수 있음
향후 컴파일러의 사용은 선택이 아니라 필수가 되기 때문에 저 린트를 추가해 리액트 룰을 잘 지킬 수 있도록 해야할 것 같음
