지연 로딩이란?
먼저 리액트 프로젝트를 빌드를 하면 하나의 커다란 파일에 모든 코드가 병합이 된다.
따라서 사용자는 해당 페이지에 방문했을 때 모든 코드를 불러와야 첫 화면을 볼 수 있고, 이는 커다란 프로젝트에서 첫 페이지 로딩이 느려지게 된다.
이럴때 사용하는 최적화 기법이 지연 로딩으로, 지연 로딩이란 데이터를 실제 필요할 때 로딩하는 기법을 의미한다.
지연 로딩 적용하기
리액트에서 지연 로딩을 적용할때는 컴포넌트와 함수에서 방법에 약간의 차이가 존재한다.
왜냐하면 지연 로딩을 적용한 함수는 Promise를 반환하기 때문에 컴포넌트 함수가 아니게 되기 때문이다.
컴포넌트 지연 로딩
기본적으로 동적import함수를 사용하여 파일을 import해주며, React에서 제공하는 lazy()함수와 <Suspense />컴포넌트를 사용하여 지연 로딩을 수행한다.
...
...
const HomePage = lazy(() => import("./pages/HomePage"));
...
...
<Suspense fallback={<p>Loading...</p>}>
<HomePage />
</Suspense>위와 같은 형태로, import구문을 통해 해당 파일을 불러와준 뒤, 리액트에서 제공하는 lazy함수로 감싸주어 컴포넌트로 사용할 수 있게 만들어준다.
또한 해당 컴포넌트를 사용하는 부분에서 <Suspense />컴포넌트로 감싸주어 로딩되는동안 fallback을 구현해준다.
중요
지연 로딩을 통해 불러온 컴포넌트들 모두를 개별적인 <Suspense />로 감싸지 않고, 가장 상위 라우트의 element만 감싸주어도 children의 element는 모두 <Suspense />가 적용된다.
함수 지연 로딩
(meta) => import("./pages/EventDetailPage").then((module) => module.deleteEventActoin(meta))
async (meta) => (await import("./pages/EventDetailPage")).eventDetailLoader(meta)위와 같이 promise체이닝을 통해 함수를 불러올수도 있고, async/await을 통해 불러올수도 있다.
중요한 점은 함수에서 매개변수가 필요할 경우 meta를 인자로 주어야한다는점이 있다.
지연 로딩을 사용했을때의 웹페이지 동작
지연 로딩을 사용하기 전에는 사용자가 첫 화면에 접속하는 시점에서 모든 데이터를 받아와야하기 때문에 개발자 도구에서 네트워크 탭을 확인했을때 다음과 같이 모든 컴포넌트와 함수들이 불러와진다.
하지만 지연 로딩을 사용했을경우 해당 파일이 필요한 시점에 import를 해오기때문에 첫 화면에서는 다음과 같이 더 적은 파일들이 불러와진다.
또한 해당 파일이 필요한 시점인 라우트가 변경되었을 때 해당 라우트에서 필요한 파일들이 불러와진다.
