React Spinner 사용하기(Loading바)

스피너란 무엇일까?

여러가지 뜻이 있지만, 웹 및 앱에서 스피너는 다음 그림과 같은 것들이다.

아마 대부분의 사람들은 웹이나 앱에서 loading화면에서 위의 그림같은 것들을 본적이 있을 것이다.

그러면 내가 개발할 앱에도 스피너를 이용하여 Loading 화면을 표현해보자!

우선 라이브러리를 설치한다.

$ npm install react-spinners --save

React-spinners에는 다양한 스피너들이 있으며, 다음 공식홈페이지에서 어떤 스피너를 어떻게 쓸지 확인해보자

React-Spinners

나는 "PacmanLoader"가 재밌어보여서 사용할 것이다.

	<Box>
      <PacmanLoader color="#000000" size={25} />
    </Box>

색은 검은색, size는 25로 하였다.(defalt값이 25임. 굳이 설정안해도됨)

완성!!