[React] 스피너(react-spinners) 설치 및 사용

로딩에 꼭 사용하게 되는 스피너..
이번에도 사용하게 되어 기억해두기 위해 글을 작성하였다.

1. 우선 react-spinners를 설치하기 위해 npm i react-spinners 명령어를 터미널에 입력해주자.
   

2. React Spinners 홈페이지에 들어가 사용할 로딩 애니메이션을 선택해준다.
   이번에는 간단하게 FadeLoader을 사용해볼 예정
   

3. 클릭해서 들어가보면 이렇게 "Show code"라고 되어있는 부분이 있는데,
   

클릭해보면 아래처럼 <FadeLoader />을 사용해서 쓸 수 있다고 나와있다.

4. 아래에 control부분에 하나씩 넣어보며 필요한 모양대로 갖춘??뒤에보면, 위에 바로 COPY하여 사용할 수 있도록 되어있다.
   

5. 코드로 돌아와서, 나는 매번 로딩이 같은 색일지 어떨지 모르겠는 상태기 때문에.. 따로 Loading 컴포넌트를 만들어 넣어주기로 했다.
   
   react-spiners를 설치했으면 저렇게 잘 뜬다.
   바로 import 시켜주자.
   

6. 이후 아까 만들었던 모양대로 가져오기 위해 홈페이지에서 copy했던 코드를 붙여주었다.
   

7. 이제 로딩이 필요한 곳에 해당 컴포넌트를 넣어주면 된다!