(React) 통신에 의한 시간 지연에 대한 로딩화면 띄우기

배경(문제)

fetch를 통한 ProductList 데이터를 불러오는 시간이 불규칙적이고, 오래 걸리는 경우 3초이상도 걸리는 경우가 생김
이러한 경우에도, 사용자에게는 현재 로딩 중임을 시각적으로 알릴 필요가 있음

해결방법

1. 라이브러리 설치

npm install react-promise-tracker --save

2. 로딩 화면 컴포넌트 정의

  • loading indicator를 보여줄지 말지에 대하여 결정하기 위하여, usePromiseTracker를 import (Loading Indicator에 현재 status를 report하는 역할)
//constants.js
import { usePromiseTracker } from "react-promise-tracker"
...
export const LoadingIndicator = (props) => {
  const { promiseInProgress } = usePromiseTracker();
  return promiseInProgress && <h1>로딩중입니다. </h1>;
};

3. 상위 레벨의 컴포넌트에 Loading Indicator삽입 (ex>index.js)

render(
  <div>
    <App />
    <LoadingIndicator/>
  </div>,
  document.getElementById('root'));

4. 시간지연이 예상되는 통신 함수를 track Promise method내의 인자로 삽입

//ProductList.js
...
 import { trackPromise } from 'react-promise-tracker';
 ...
 trackPromise(
      fetch(`${productList_API}`, {
        method: 'POST',
        body: {
          categoryId: Number(checkedCategory),
          bookmark: bookMark,
          minimumPrice: Number(price.split('-')[0]),
          maximumPrice: Number(price.split('-')[1]),
          sort: Number(sortingNumber),
        },
      })
        .then((res) => res.json())
        .then((data) => {
          ...
        .catch((err) => console.warn('ProductListError=>', err))
    );
  };

좋은 웹페이지 즐겨찾기