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