[이세계 MBTI 테스트] 리액트 로딩 스피너 라이브러리 react-spinner

들어가기

MBTI 테스트 구현 중, 모든 문항에 대한 답을 고르고 나면 결과 페이지로 이동하게 로직을 구성했다.

그런데 답을 하자마자 바로 딱! 하고 결과 페이지로 가니 뭔가 딱딱한 느낌이 들었다.

그래서 정적 페이지지만 setTimeout을 걸어서 로딩중 화면을 띄우고 몇 초 후 라우팅 되도록 로직을 수정했다.

 

이 때 로딩중 화면을 어떻게 띄울지 고민했는데, /loading 이라는 페이지로 라우팅하는 것보다 그냥 모든 문항에 대한 답을 고르면 어떤 값을 true로 설정해주고 이에 따라 삼항 연산자로 로딩중 화면을 띄우기로 했다.

 

이 로딩중 화면은 그 원래 서버로부터 어떤 답을 가져오기 전, 유저가 응답을 기다리는 동안 지루하지 않게, 에러가 난 건지 결과를 기다리는 건지 알려주기 위해, 이탈을 방지하기 위해 보여주는 동글동글 돌아가는 그것인데 스피너, spinner라고 한다. 

 

스피너를 구현하는 방법은 크게 2가지로 gif를 다운 받아 사용하는 것과 react-spinner 라이브러리를 사용하는 것 2가지다.

나는 다양한 라이브러리를 사용해보고 싶어서 후자를 선택했는데 전자의 방법도 매우 간단하다.

 

gif로 스피너 구현

1. https://loading.io/ 에서 원하는 스피너를 만들어 다운 받는다. 배경을 투명으로 해줘야 사용할 때 자연스럽다.

2. gif로 다운 받아 에셋을 관리하는 폴더에 넣고 import 해 쓰면 된다.

 

react-spinner로 스피너 구현하기

1. 라이브러리를 설치한다. (npm 참고)

yarn add react-spinners
npm install react-spinners --save

 

2. https://www.davidhu.io/react-spinners/ 에서 원하는 spinner 모양을 선택해 import 한다.

 

23개 정도 있는데 타이틀을 클릭하면 스토리북으로 이동된다. 

최근 스토리북을 사용해서 어느 정도 이해할 수 있어 다행이었다.

 

이런 식으로 프로퍼티에 대해 설명이 적혀 있어서 참고하면 된다.

npm에서 usage를 읽으면 알 수 있듯이, 각 로더는 기본 프로퍼티를 갖고 있는데 유저가 오버라이드 해서 커스텀하면 된다.

cssOverride는 카멜케이스로 작성해줘야 한다.

 

import BarLoader from 'react-spinners/BarLoader';

  const css = {
    borderRadius: '10px',
  };

            <BarLoader
              color="#bf8df2"
              height="10px"
              width="250px"
              loading={setIsLoadingOpen}
              aria-label="Loading Spinner"
              cssOverride={css}
              speedMultiplier="1"
            />

 

나는 BarLoader를 쓰기로 해서 이걸 import 했다.

그런데 그냥 정말 막대여서, border-radius를 줘 둥근 막대로 만들기로 했다.

이 때 이렇게 객체로 프로퍼티와 값을 적고 cssOverride의 값으로 주면 오버라이드가 된다.

 

그리고 loading 프로퍼티의 값은 반드시 불리언으로 줘야 하며 true일 때만 동작한다.

따라서 나는 모든 문항에 대해 답을 고르면 setIsLoadingOpen(true)로 수정해 동작하도록 했다.

 

 

그 결과 이런 식으로 둥근 막대의 스피너가 완성됐다. 🎉