로딩중입니다...는 React로 어떻게 사용할까?

우리는 흔히 웹앱이나 앱을 사용하다 보면 로딩중..이라고 하면서 

로딩 스피너가 뱅글뱅글 도는 화면을 자주 볼 수 있다.

 

이건 어떻게 쓸까? 바로 React.lazy()이다!!

 

리액트 홈페이지에 나온설명은 아래와 같다.

React.lazy함수를 사용하면 동적으로 import를 사용해서 컴포넌트를 렌더링 할 수 있다.

 

쉽게 말하면 lazy에 담긴 컴포넌트를 느리게 render할 수 있다는 말이다.

 

리액트는 처음 렌덜이 될 때 번들을 자동으로 불러오기 때문에

로드되길 기다리는 동안 우리는 사용자에게 로딩화면과 같은 예비 컨텐츠를 보여줄 수 있는 장점이 있다.

 

사용법은 아래와 같다.

import React, { Suspense } from 'react';

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

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

주의할 점은 lazy 컴포넌트는 반드시 Suspense의 하위에서 렌더링되어야 한다.

fallback prop은 컴포넌트가 로드될 때 까지 기다리는 동안 렌더링 하려는 React Element를 노출한다.

 

이렇게 하면 우리는 로딩되는 시간동안 사용자에게 유용한 경험을 제공할 수 있다.

 

자세한 내용은 공식 홈페이지를 참조하길..

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

코드 분할 – React

 

리액트 공부하려고 고급 안내서 천천히 읽어보고 있는데 좋은 내용을 찾아서 기분이 좋다.

천천히 다 읽어봐야겠다!