[React]Skeleton 사용하기

스켈레톤이란?

스크린은 페이지 콘텐츠가 완전히 렌더링 되기 전에 나타나는 시각적 자리 표시자입니다. 스켈레톤 스크린은 최종 콘텐츠가 제자리에 로드되기 전에 페이지 구조의 윤곽을 나타내는 연한 색상의 배경, 선 및 텍스트로 구성됩니다.

스켈레톤 사용 예시

스켈레톤 예시 코드

• Skeleton Bar는 보통 텍스트나 큰 블록을 대신할 수 있는 긴 막대 형태로 사용됩니다. 아래는 긴막대를 작성한 코드 이다.

import styled, { keyframes } from 'styled-components';

const shimmer = keyframes`
    0% {
        background-position: -400px 0;
    }
    100% {
        background-position: 400px 0;
    }
`;

const SkeletonBar = styled.div`
    width: 86%;
    height: 30px;
    background: #f0f0f0;
    background-image: linear-gradient(to right, #f0f0f0 0%, #e0e0e0 20%, #f0f0f0 40%, #f0f0f0 100%);
    background-repeat: no-repeat;
    background-size: 800px 100%;
    display: inline-block;
    position: relative;
    overflow: hidden;
    animation: ${shimmer} 3s infinite linear;
    border-radius: 10px;
    margin-bottom: 13px;
`;

export default SkeletonBar;

• Skeleton Circle은 보통 프로필 사진이나 아이콘을 대신하는 원형 모양으로 사용됩니다. 아래는 원형 아이콘을 작성한 코드이다.

import styled, { keyframes } from 'styled-components';

const shimmer = keyframes`
    0% {
        background-position: -400px 0;
    }
    100% {
        background-position: 400px 0;
    }
`;

const SkeletonCircle = styled.div`
    width: 40px;
    height: 40px;
    background: #f0f0f0;
    background-image: linear-gradient(to right, #f0f0f0 0%, #e0e0e0 20%, #f0f0f0 40%, #f0f0f0 100%);
    background-repeat: no-repeat;
    background-size: 800px 100%;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    overflow: hidden;
    animation: ${shimmer} 3s infinite linear;
    margin: 0 15px 13px 15px;
`;

export default SkeletonCircle;

스칼레톤 적용예시

• Skeleton 컴포넌트를 표시하는 예시입니다.

import SkeletonBar from '../assets/styles/skeleton/Bar';
import SkeletonCircle from '../assets/styles/skeleton/Circle';

    if (loading) {
        // 로딩 중일 때 Skeleton 컴포넌트를 표시
        const skeletons = [];
        for (let i = 0; i < 4; i++) {
            skeletons.push(
                <BarContainer key={i}>
                    <SkeletonCircle />
                    <SkeletonBar />
                </BarContainer>
            );
        }
        return <GraphContainer>{skeletons}</GraphContainer>;
    }