React로 Skeleton UI 만들기

위 프로젝트는 찾고자하는 도시와 동물의 종류를 선택하여 찾기 버튼을 누르면 우측에 동물의 Data를 보여주는 프로젝트이다 

서버에서 동물의 Data를  받아오기 전에 우측 화면에 아무런 UI가 없다면 사용자는 콘텐츠를 기다리다가 쉽게 지루함을 느낄 수 있고

단순히 흰색 화면만 보여준다면 많은 사람들은 사이트를 떠나게 될 것이다.

 

이 전에는 Loading bar 또는 Loading Spinner 등이 쓰였는데 최근 핫하다는 웹 페이지들은 모두 Skeleton을 사용하는 것 같다

 

더 나은 UX를 위해서 Skeleton UI를 배워보자

 

 

import axios from 'axios';
import React, { useEffect, useState } from 'react';
import Skeleton from './Skeleton';

const List = () => {
  const [list, SetList] = useState([]);

  useEffect(() => {
	setTimeout(async () => {
	  try {
		const response = await axios('url/list');
		const data = response.data;
		SetList(() => {
			return list.concat(data);
		});
	  } catch {
		  throw new Error('데이터 조회 실패');
		}
	}, 1000);
}, []);

  return (
		<div>
        // list가 있다면 list 렌더링 없다면 Skeleton 렌더링
			{list ? list.map((listItem) => <div>{listItem}</div>) 
            	: <Skeleton />}
		</div>
  );
};

export default List;

 

위의 코드는 axios로 Data를 받아와 list State에 받아온 Data를 저장하고 list 가 있으면 list를 렌더링하고 없다면 Skeleton 컴포넌트를 

렌더링하는 코드이다 

 

 

import React from 'react';
import * as style from './SkeletonStyle';
import theme from '../../assets/styles/theme';

function Skeleton() {
	return (
		<style.Div theme={theme}>
			<style.Img theme={theme}>
				<style.Shimmer />
			</style.Img>
			<style.Wrap theme={theme}>
				<style.Text theme={theme}>
					<style.Shimmer />
				</style.Text>
				<style.Text theme={theme}>
					<style.Shimmer />
				</style.Text>
				<style.Text theme={theme}>
					<style.Shimmer />
				</style.Text>
			</style.Wrap>
		</style.Div>
	);
}

export default Skeleton;

 

Skeleton 컴포넌트의 코드를 살펴보자 여기서 주목해야할 것은 Shimmer의 역할이다 

Shimmer는 각 엘리먼트 안에 포함되어 그림자가 흐르는 듯한 애니메이션을 보여준다 아래를 보고 이해해보자 !

 

 

 

 

위 처럼 그림자가 흐르는 듯한 역할을 하는 것이 Shimmer의 역할이다 

CSS 코드를 보면서 살펴보자 

 

 

import styled from 'styled-components';



export const Shimmer = styled.div`
	width: 50%;
	height: 100%;
	background-color: #e0e0e0;
	box-shadow: 0 0 30px 30px #e0e0e0;
	animation: loading 2s infinite;
	@keyframes loading {
		0% {
			transform: translateX(-50%);
		}
		50% {
			transform: translateX(100%);
		}
		100% {
			transform: translate(200%);
		}
	}
`;

export const Div = styled.div`
	display: flex;
	flex-direction: column;
	width: 150px;
	height: 200px;
	margin: 1em;
	border: 1px solid #e8e7e6;
	border-radius: 0.5em;
	font-size: 0.7em;
	overflow-x: visible;
	cursor: pointer;
	background-color: white;
	box-shadow: 6px 6px 8px 0px rgba(217, 217, 217, 1);
`;

export const Img = styled.div`
	width: 100%;
	height: 150px;
	border-top-left-radius: 0.5em;
	border-top-right-radius: 0.5em;
	overflow: hidden;
	background-color: #eeeeee;
`;

export const Wrap = styled.div`
	display: flex;
	justify-content: center;
	flex-direction: column;
	padding: 0.4rem;
`;

export const Text = styled.div`
	width: 100px;
	height: 10px;
	margin-bottom: 5px;
	overflow: hidden;
	background-color: #eeeeee;
`;

 

 

각 엘리먼트들은 div 태그로 생성되어 있으며 Data가 들어와 채워야할 자리에 임의로 크기를 지정하여 색을 입힌 것이다 

그리고 그 엘리먼트 내부에 Shimmer 엘리먼트를 삽입하여 애니메이션이 나오도록 하는 것이다 

Shimmer는 무한으로 상위 엘리먼트를 순환하며 애니메이션을 보여주고 Shimmer를 감싼 부모 태그에는 overflow: hidden 을 줘서

Shimmer가 부모 태그 밖에서 보이지 않도록 막아준다 

 

위의 코드로 Skeleton을 만들면 하나의 list 밖에 나오지 않지만 Skeleton 컴포넌트 안에 있는 엘리먼트의 수를 늘린다면 원하는 만큼의 Skeleton UI를 생성 할 수 있다 !