[React] React.lazy 와 Suspense

Today, What I learned?

우리 프로젝트에 적용되어 있는 코드분할에 대해서 알아보려 한다.

내가 적용한 부분이 아니었고, 나도 처음 접한 것이라 아직 생소한 부분!...

리액트 공식문서에도 이 부분이 잘 설명되어 있다.

 

https://ko.reactjs.org/docs/code-splitting.html

코드 분할 – React

 

 

 

코드 분할은 앱을 지연로딩(lazy loading) 할 수 있도록 도와준다.

사용자가 필요한 코드를 그때그때 불러오기 때문에 초기 로딩에 필요한 코드가 줄어들고, 성능 향상에 많은 도움이 된다.

 

 

React.lazy

React.lazy 함수를 이용해서 동적 import로 각각의 컴포넌트를 렌더링 할 수 있다.

라우트 컴포넌트에는 React.lazy로 불러온 컴포넌트를 적용한다.

const MyPageComponentPage = React.lazy(() => import('pages/MyPage'));


 <Route
        path="/mypage"
        element={
          useIsLogin() ? <MyPageComponentPage /> : <Navigate to="/" replace />
        }
        errorElement={<ErrorPage />}
 />

 

 

Suspense

Suspense 컴포넌트에서 fallback props를 설정해두면 React.lazy 컴포넌트가 로딩될 때까지 props로 전달된 컴포넌트를 보여준다.

로딩 페이지를 넣기 딱!

<Suspense fallback={<LoadingPage />}>
    ...
</Suspense>

 

 

코드분할 확인

페이지에 접속할 때 마다 각각 분할된 코드가 로드되는 것을 네트워크에서 확인할 수 있다.

 

팀원 찾기 페이지 접속 시

마이페이지 접속 시

 

만약 분할을 해두지 않았다면 한 번에 모든 코드를 불러왔을 것이기 때문에 페이지를 이동할 때마다 다시 스크립트를 받아오지 않을 것!..