배경(문제)

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

해결방법

• 참고사이트 (react-promise-tracker)

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))
    );
  };