Per ardua ad astra.

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

Suspense 컴포넌트들어가며리액트(React.js)에서 사용되는 @Suspense@ 컴포넌트에 대해 정리해본다. Suspense 컴포넌트개념애플리케이션의 비동기 데이터를 쉽게 관리하고 사용자 경험을 개선하기 위해 도입된 기능주로 데이터 로딩 상태를 처리하는데 사용된다.이 컴포넌트를 사용하여 비동기 데이터가 로딩될 때 사용자에게 로딩 스피너(Spinner)나 대체 컨텐츠를 보여줄 수 있다. 사용법@Suspense@ 컴포넌트는 주로 다른 비동기 컴포넌트를 감싸는 용도로 사용된다.@Suspense@는 @fallback@ 이라는 프로퍼티를 통해 로딩 중에 보여줄 컨텐츠를 지정할 수 있다.Loading...}>   사용 시 주의할 점@Suspense@는 클라이언트 측 렌더링에서 동작한다.서버 사이드 렌더링에..