lazy&suspense

lazy?

lazy는 React에서 Suspense컴포넌트와 함께 사용되는 함수.

lazy는 코드 스플리팅(Code splitting)을 쉽게 구현할 수 있게 도와주는 함수이다.

*** 코드 스플리팅이란?

애플리케이션의 번들 크기를 줄이고 초기 로딩 시간을 최적화하기 위해 사용된다. 애플리케이션을 여러 개의 작은 청크로 분할하여 필요한 경우에만 로딩할 수 있도록 해준다. 이를 통해 사용자는 초기 로딩 시간을 줄이고 페이지를 빠르게 볼 수 있다.

const OpenStage = lazy(() => import("./../pages/opening/OpenStage"));

위 OpenStage는 ./../pages/opening/OpenStage 경로에 있는 파일로부터 import해온다. 이 컴포넌트는 애플리케이션에서 처음 사용될 때까지 로딩되지 않으며, 필요한 시점에 비동기적으로 로딩된다. 이를 가능하게 하는 것이 바로 lazy!

lazy 함수를 사용하면, 다른 애플리케이션의 다른 부분이 로딩되는 동안 Suspense 컴포넌트를 사용하여 로딩 상태를 처리할 수 있다. 일반적으로 Suspense 컴포넌트는 로딩 중에 보여줄 로딩 스피너나 다른 대체 컨텐츠를 관리한다.