📚 Reference

• 공식 문서 1

📜 Chapter

next.config.js, next.config.ts

‣

JSX (JavaScript eXtension)

TSX (TypeScript eXtension)

React Complier

• React Complier
• 리액트 컴파일러
• React 애플리케이션의 빌드 시점에 자동으로 성능을 최적화하는 새로운 도구이다.
• 이 컴파일러의 가장 중요한 목표는 개발자가 수동으로 수행해야 했던 메모이제이션(memoization) 작업을 대신하여 코드를 더 단순하고 효율적으로 만드는 것이다.
• React Compiler는 빌드 도구와 통합되어 작동하며, Babel 플러그인 형태로 사용할 수 있다.
• 기존의 React 컴파일러인 Babel이 JSX를 JavaScript로 변환하는 기본적인 역할을 수행했다면, React Compiler는 그 위에 성능 최적화라는 고급 기능을 추가하는 역할을 한다고 이해할 수 있다.

React Compiler - 필요한 이유

• 기존에는 React 애플리케이션의 불필요한 리렌더링을 막기 위해 개발자가 useMemo, useCallback, React.memo와 같은 훅을 직접 사용해야 했다.
• 이는 다음과 같은 문제점을 야기했다.
  • 번거로움: 코드의 규모가 커질수록 수동으로 메모이제이션을 관리하는 것이 매우 번거롭고 시간이 많이 소요된다.
  • 실수 가능성: 잘못된 의존성 배열(dependency array)을 지정하면 예상치 못한 버그나 성능 저하가 발생할 수 있다.
  • 복잡성 증가: useMemo나 useCallback이 추가되면서 코드가 길어지고 가독성이 떨어진다.
• React Compiler는 이 모든 문제를 해결하기 위해 등장했다.