우리가 사용하는 사이트에서 데이터를 내려받기 전까지 화면이 멈춰있다면 사용자 입장에서는 데이터를 받아오고 있는지, 오류가 난건지 등을 파악하기 힘들다. 그렇기 때문에 UX적인 부분을 고려하여 사용자에게 로딩중이라는 것을 나타내주는 것이 좋다. 그래서 많이 사용하는 것이 스피너를 활용한 로딩화면이다. 요즘은 스켈레톤도 많이 사용하는 것 같다.
리액트에서 로딩화면을 만들어줄 수 있는 방법엔 여러가지가 있는데 Gif 파일을 활용하는 방법과 React-spinners를 사용하는 두가지 방법을 알아보려고 한다. 먼저 gif 파일로 간단하게 만들어보자.
1. 리액트 로딩화면 gif 버전
먼저 Loading.jsx 컴포넌트를 생성한 후, 스피너를 다운로드하러 간다.
// Loading01.jsx
import React from "react";
const Loading01 = () => {
return (
<div>
<h3>잠시만 기다려주세요.</h3>
// 스피너 이미지 들어갈 곳
</div>
);
};
export default Loading01;
https://loading.io/ 에서 원하는 스피너를 다운로드할 수 있는데, 원하는 이미지와 색을 지정하고 배경의 불투명도를 0%로 만들어준다. Background를 클릭한 후 가장 오른쪽 바를 아래로 내려준다. 무료라고 붙어있는 스피너 이미지는 모두 무료이다!
원하는 스피너를 선택하고 배경 불투명도를 0으로 맞췄다면 GIF 파일로 다운로드해주자. 다운로드 후에 assets 폴더 안에 이미지를 넣어준 후, 원하는 곳에 import 하여 사용하면 된다. 로딩화면을 예쁘게 커스텀하여 스피너까지 넣어주면 완료!
import React from "react";
import Spinner from "../../../assets/Spinner1.gif";
const Loading01 = () => {
return (
<div>
<h3>잠시만 기다려주세요.</h3>
<img src={Spinner} alt="로딩" width="10%" />
</div>
);
};
export default Loading01;
Loading 컴포넌트를 만들어놓고 필요한 곳에 import 하여 공통으로 사용하면 되는 것이다.
2. 리액트 로딩화면 React-spinners
React-spinners를 사용하기 위해서는 먼저 라이브러리 설치가 필요하다.
# npm yarn 중 내가 사용하는대로 설치
$ npm i react-spinners --save
$ yarn add react-spinners
라이브러리를 설치한 이후 Spinner 모양을 선택하면 되는데, https://www.davidhu.io/react-spinners/에 접속하여 원하는 모양과 옵션을 선택하면 된다. 나는 SyncLoader를 선택했다. SyncLoader를 import 해서 추가해주면 끝! 각각의 옵션은 사이트에서 확인 후 추가하면 된다.
import React from "react";
import { SyncLoader } from "react-spinners";
const Loading02 = () => {
return (
<div>
<h3>잠시만 기다려주세요.</h3>
<SyncLoader />
</div>
);
};
export default Loading02;
완성~!
이 두가지 방법 외에도 mui에서 가져온다거나 라이브러리를 이용할 수 있는 방법은 다양하니 원하는 디자인이 있는 스피너를 찾아 적용하면 된다. 크게 어렵지 않으니 사용자 입장에서 화면을 이탈하는 일이 없도록 이러한 세세한 부분까지 신경써주자~!
