[React] 로딩바(loading bar) 표시 및 로딩 속도 조절하는 방법 (+ setTimeout)

Intro 

안녕하세요. 이번 시간에는 리액트에서 로딩바 표시 및 로딩 속도를 조절하는 방법에 대해 알아보겠습니다. 

 

How to solve the problem

다음의 List 컴포넌트가 있다고 가정해봅시다. handleFilterClick함수를 클릭 할때마다 필터기능이 작동되는 로직입니다. 필터를 누를 때마다 필터가 된듯한 동작을 표현하기 위해 로딩바를 추가보도록 하겠습니다. 

const List: NextPage<Props> = () => {

  const {dataList, setDataList} = useLoginStore();
  const [totalCtn, setTotalCtn] = useState<number>();
  const [filterStatus, setFilterStatus] = useState("ALL");

  const handleFilterClick = (status: string) => {
    setFilterStatus(status);
  };

  const isFiltered = () => {
    // some conditional
  };

  return (
    <div>
      <div onClick={() => handleFilterClick("ALL")}>{data && totalCtn}</div>
      <div onClick={() => handleFilterClick("TOP")}>{data.top}</div>
      <div onClick={() => handleFilterClick("SKIRT")}>{data.skirt}</div>
      {dataList?.map((item, index: number) => {
        if (isFiltered()) {
          return (
            <div>
              <button type="button">
                <strong>{item.name}</strong>
              </button>
            </div>
          );
        }
      })}
    </div>
  );
};

export default List;

 

로딩바 추가하기

우선 로딩바 표시를 위해 상태값을 아래와 같이 정의해줍니다. 

const [isLoading, setIsLoading] = useState(false);

 

이미 존재하는 데이터 리스트를 뿌려주기 때문에 순식간에 필터가 됩니다. 따라서 로딩바 표시를 위해서는 필터 클하는 순간 시간을 잠깐이나마 지연시켜야 했습니다. 따라서 저는 아래와 같이 setTimeout()을 활용해서 짧은 텀을 추가해 줬습니다.

 

즉 handleFilterClick 함수가 클릭되는 순간 isLoading 값을 true로 만들고, 시간텀을 둔 후에 isLoading값을 false로 만들었다고 보면 됩니다. 

const handleFilterClick = (status: string) => {
    setIsLoading(true);
    setTimeout(() => {
      setIsLoading(false);
      setFilterStatus(status);
    }, 100);
};

 

렌더링된 컴포넌트는 다음과 같이 처리해줬습니다. isLoading값이 true일 때 Loding 컴포넌트를 표시해줬습니다. 

<div>
  <div onClick={() => handleFilterClick("ALL")}>{data && totalCtn}</div>
  <div onClick={() => handleFilterClick("TOP")}>{data.top}</div>
  <div onClick={() => handleFilterClick("SKIRT")}>{data.skirt}</div>
  {isLoading ? (
    <Loding />
  ) : (
    <>
      {dataList?.map((item, index: number) => {
        if (data && isFiltered()) {
          return (
            <div>
              <button type="button">
                <strong>{item.name}</strong>
              </button>
            </div>
          );
        }
      })}
    </>
  )}
</div>

 

---

https://developer.mozilla.org/en-US/docs/Web/API/setTimeout