서론

react의 핵심 아이디어는 '현재 상태의 함수로 UI를 정의하는 것' 이다.
💡 이는 개발자가 앱의 각 상태에 대한 UI를 선언적으로 정의하고,
상태 변경 시 react가 자동으로 UI를 업데이트하는 방식을 의미한다.
-> 하지만 때로는 불필요한 렌더링이 발생하는 문제가 있다!

메모이제이션

이러한 문제 해결을 위해 react는 메모이제이션 api를 제공한다.

• useCallback: 함수 메모이제이션
• useMemo: 연산의 결과 메모이제이션
• React.memo: 컴포넌트 메모이제이션

🚨 그러나 이 과정에서 코드가 복잡해지고, 유지보수가 어려워질 수 있다.

react compiler

빌드 타임 전용 도구로 React 앱을 자동으로 최적화한다.
순수 자바스크립트로 동작하며, Eslint 규칙도 포함되어 있다.

• 초기 피드백을 받기 위해 오픈소스화한 새로운 컴파일러

💡 이를 사용하면 react 코드를 간단히 최적화된 형태로 변환할 수 있다.
애플리케이션을 최적화하기 위해 코드를 자동으로 메모이제이션한다.

시작하기

npm install -D eslint-plugin-react-hooks@^6.0.0-rc.1

참고

https://developers.kakaomobility.com/docs/techblogs/react-compiler/
https://ko.react.dev/learn/react-compiler