react-loading-skeleton으로 스켈레톤 UI 만들기

React 프로젝트에서 로딩 상태를 시각적으로 표현할 때 흔히 사용하는 방식이 Skeleton UI이다. react-loading-skeleton은 이 기능을 빠르게 구현할 수 있게 도와주는 경량 라이브러리다.

 

참고해볼 글

https://tech.kakaopay.com/post/skeleton-ui-idea/

무조건 스켈레톤 화면을 보여주는게 사용자 경험에 도움이 될까요? | 카카오페이 기술 블로그

 

 

1. 설치 방법

npm install react-loading-skeleton

 

2. 사용 방법

// 스켈레톤 css 사용하기 위해서 import
import 'react-loading-skeleton/dist/skeleton.css';
import Skeleton from 'react-loading-skeleton';

// 기본 바 형태 스켈레톤 출력
<Skeleton />

<Skeleton height={20} width={200} />
<Skeleton circle height={40} width={40} />
<Skeleton count={3} /> // 여러 줄

 

커스텀 방법

<Skeleton baseColor="#ddd" highlightColor="#f5f5f5" />

 

3. 내가 사용한 방법

import React from 'react';
import styled from 'styled-components';
import 'react-loading-skeleton/dist/skeleton.css';
import Skeleton from 'react-loading-skeleton';

const SkeletonSidePanel: React.FC = () => (
  <StyledSkeleton>
    <P>추천 커뮤니티</P>
    {[0, 1, 2].map((_, idx) => (
      // eslint-disable-next-line react/no-array-index-key
      <React.Fragment key={idx}>
        <BodySkeleton>
          <TitleSkeleton width="40%" />
          <LineSkeleton />
          <LineSkeleton width="85%" />
        </BodySkeleton>
        {idx < 2 && <Hr />}
      </React.Fragment>
    ))}
  </StyledSkeleton>
);

export default SkeletonSidePanel;

const StyledSkeleton = styled.div`
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  border: solid 1px var(--color-grey-2);
  padding: 24px 20px;
  text-decoration: none; // 임시, link 들어갈 가능성 있어서 미리 추가

  ${media.tablet} {
    margin-top: 44px;
  }

  ${media.mobile} {
    display: none;
  }
`;

const BodySkeleton = styled.div`
  display: flex;
  flex-direction: column;
  padding-top: 20px;
  padding-bottom: 34px;
`;

const TitleSkeleton = styled(Skeleton)<{ $width?: string }>`
  && {
    width: ${(props) => props.$width || '100%'};
    height: 1rem;

    margin: 7px 0 14px 0;
    ${media.mobile} {
      width: 90%;
    }
  }
`;
const LineSkeleton = styled(Skeleton)<{ $width?: string }>`
  && {
    width: ${(props) => props.$width || '100%'};
    height: 12px;
    padding: 6px 0;
    ${media.mobile} {
      width: 90%;
    }
  }
`;

 

 

4. 결과