React lazy loading 개념과 사용 방법

React lazy loading 개념과 사용 방법

레이지 로딩은 해당 코드가 필요할 때만 그 특정 코드를 로딩하는 것이다.

React 애플리케이션을 사용하면 결국 큰 자바스크립트 코드 번들을 빌드하게 되고 해당 사이트를 사용하려면 웹 사이트의 모든 방문자가 이 전체 번들을 다운로드해야 한다.

React가 이 모든 유저 인터페이스를 화면에 띄우고 애플케이션이 반응하게 하기 위해 모든 코드가 다운로드된 후에만 작동한다.

즉 사용자가 화면이 보이고 애플리케이션을 사용할 수 있을 때까지 기다려야 한다.

따라서 우리는 이 초기 코드 번들을 가능한 한 작게 만들어야 하고 특정한 코드는 진짜로 해당 페이지에 들어올 때만 다운로드되도록 해야 한다.

이것이 바로 레이지 로딩의 개념이다.

코드를 여러 덩어리와 여러 번들로 나누고 각각 필요할 때만 다운로드하는 것이다.

라우팅을 사용하는 경우 라우트별로 코드를 분할해서 특정 라우트에 대한 코드가 해당 라우트를 방문할 때만 다운로드되도록 할 수 있기 때문에 레이지 로딩을 구현하기 쉽다.

사용자가 NewProduct 라우터를 방문하면 이 컴포넌트에 대한 코드만 다운로드하려고 한다고 가정해 본다.

코드 분할에 도움이 되는 기본 메서드인 React.lazy를 사용할 수 있다.

익명 함수의 결과로 import를 함수로 호출하여 동적 import가 가능하다.

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

이제 여기에서 React.lazy에 전달하는 이 함수는 이 컴포넌트가 필요할 때 React에 의해 실행된다.

하지만 이것만으로는 작동하지 않을 것이다.

문제가 생긴 이유는 우리가 이 코드를 필요할 때만 다운로드 하는데 이 다운로드가 몇 밀리초 또는 몇 초가 걸릴 수 있다.

그리고 이 코드를 다운로드하는 동안 React는 당연히 중단되고, 다운로드가 완료될 때까지 이 컴포넌트를 로드할 수 없다.

그래서 다운로드가 조금 오래 걸릴 경우 표시되는 대체 UI를 정의해야 한다.

그럴 때 서스펜스 컴포넌트를 사용할 수 있다.

<Suspense fallback={<p>Loading...</p>}>
  <Switch>
    <Route path="/new-product">
      <newProduct/>
    </Route>
  </Switch>
</Suspense>

React 라이브러리 자체에서 제공되는 특수 컴포넌트로 이것을 React.lazy를 사용하는 코드에 래핑해야 한다.

그런 다음, 이 서스펜스 컴포넌트에서 fallback prop을 설정해야 한다.

fallback은 jsx 코드를 값으로 하고 "Loading..."이라는 문구 또는 로딩 스피너를 넣을 수 있다.

모든 페이지에 대해 이 작업을 수행할 수도 있지만 대부분의 사용자가 해당 페이지를 방문할 것이라고 생각된다면, 로딩을 지연시키는 것은 불필요할 것이다.

초기 코드 번들을 더 작게 만들기 때문에 레이지 로딩은 애플리케이션의 중요한 요소가 될 수 있다.

매우 간단한 애플리케이션에서는 물론 선택 사항이겠지만, 페이지가 많고 각 페이지에 많은 컴포넌트와 많은 복잡한 로직이 붙어 있는 그런 애플리케이션에서는 레이지 로딩이 진가를 발휘한다.