Per ardua ad astra.

코드 분할(Code Splitting) : useTransition 훅, Suspense 컴포넌트, lazy 함수들어가며리액트(React.js)에서 코드 분할(Code Splitting)의 장점과 함께 사용되는 @useTransition@ 훅과 @Suspense@ 컴포넌트, @lazy@ 함수에 대해 정리해본다. 코드 분할(Code Splitting)개념리액트 애플리케이션에서 코드의 일부분을 나눠서 필요한 시점에 로드하는 방식 장점애플리케이션을 더 작은 청크(Chunk)로 나눔으로써 초기 로드 시 필요한 자바스크립트 크기를 줄인다.이를 통해 첫 화면 렌더링 속도가 빨라지며, 느린 네트워크 환경에서도 빠르게 응답할 수 있다.사용자가 필요로 하지 않는 코드는 나중에 로드되며, 상호작용할 때만 필요한 코드가 동..

지연 로딩(Lazy Loading)들어가며리액트(React.js)에서 애플리케이션을 배포하기 전에 코드 최적화 작업을 해주어야 하는데, 이때 지연 로딩(Lazy Loading)을 활용할 수 있다.지연 로딩(Lazy Loading)이 무엇인지 간단히 정리해본다. 지연 로딩(Lazy Loading)개념필요한 시점에 특정 컴포넌트나 모듈을 로드하여 초기 로딩 시간을 줄이고 애플리케이션의 성능을 향상시키는 기술이 방법을 사용하면 초기 로딩 시 불필요한 코드가 로드되지 않으며, 사용자 경험을 개선할 수 있다.  기본적인 사용 방법@React.lazy@와 @Suspense@를 사용하면 컴포넌트를 동적으로 @import@하고 로딩이 완료될 때까지 대체 UI(fallback)를 표시할 수 있다. ① 컴포넌트 동적 im..