[2023.05.15 개발 일지] 리액트 skeleton UI 구현하기

[2023.05.15 개발 일지] 리액트 skeleton UI 구현하기

주요 업무 내용

• skeleton UI 구현
• 자바 책 읽기

skeleton UI 구현

포켓몬 리스트를 불러올 때 로딩상태에서 gif를 사용했었다.

이것도 나쁘지는 않지만 허전한 느낌을 지울 수 없고 화면전환이 매끄럽지 않다.

그래서 프론트엔드가 잘 구현된 사이트에서 볼 수 있는 skeleton UI를 구현해보려고 한다.

skeleton UI는 사용자에게 로딩중임을 알리고 로딩중에 레이아웃을 유지하여 부드러운 화면전환이 가능하다.

실제 데이터의 형태와 유사한 형태라 어떤 종류의 데이터가 로딩될 것인지 예상하고 다양한 로딩 영역에서 일관된 로딩 표시를 제공하여 일관된 사용자 경험을 제공한다.

처음에는 많이 사용되는 react-loading-skeleton 라이브러리를 사용하려고 했다.

https://www.npmjs.com/package/react-loading-skeleton

react-loading-skeleton

function BlogPost(props) {
  return (
    <div>
      <h1>{props.title || <Skeleton />}</h1>
      {props.body || <Skeleton count={10} />}
    </div>
  );
}

 skeleton ui를 보여주려는 영역이 null이면 Skeleton 컴포넌트를 보여주도록 쉽게 사용할 수 있다.

레이아웃이나 애니메이션, 색상 등의 prop을 설정하여 쉽게 커스터마이징 가능하다.

하지만 라이브러리가 제대로 동작하지 않아서 직접 제작하기로 했다.

먼저 가장 기본적인 모양을 잡고 width, height, border-radius 등의 설정을 prop으로 받아 스타일링을 했다.

기존에 제작해둔 포켓몬 카드의 레이아웃과 최대한 비슷하게 skeleton Card UI를 만들었다.

최종적으로 다음과 같은 모습이고 훨씬 보기 좋다.