최종프로젝트 (로딩스피너 react-spinners)

오늘은 프로젝트의 로딩스피너를 추가해보았다. react-spinners라는 라이브러리로 구현해보았다.

1. 터미널에서 설치

yarn add react-spinners

2. 사용법

react-spinners 홈페이지에 들어가보면 여러가지 모양의 스피너가 있다. 나는 그 중 프로젝트와 어울리는 BeatLoader를 사용했다. Spinner라는 파일을 만든 뒤 다음 코드를 써주었다.

본인이 원하는대로 색을 변경할 수 있고, 크기나 마진을 커스텀할 수 있다. 로딩스피너를 가운데에 구현하고 싶어서 스피너를 div로 감싼 뒤 styled-components로 정렬해주었다.

그리고 사용하고 싶은 페이지에 다음과 같이 구현했다. (다음은 Home페이지)

const {data: artistList, isLoading: artistLoading} = useQuery({
    queryKey: ['artist'],
    queryFn: getArtistList,
  });
  .
  .
  .
if (artistLoading) {
  return (
    <div>
      <Spinner />
    </div>
  );
}

쿼리의 isLoading을 이용해 isLoading이면 스피너가 보이도록 구현했다.