React에서 더 나은 UX를 제공하는 Skeleton 만들어보기!

안녕하세요. 이번시간에는 React를 사용하면서 유저들에게 더 나은 경험을 제공해주는 스켈레톤 로딩에 대해 알아보도록 하겠습니다!

스켈레톤이란?

• 웹의 컨텐츠가 보여지기 전에 발생하는 로딩 타임때 유저들에게 최고의 경험을 제공해줄 수 있게 해주는 것
• 즉, 이미지와 같이 사이즈가 큰 요소들은 로드가 되는데 시간이 오래걸리기때문에, 그 전에 미리 만들어놓은 정적인 어떤 요소를 보여주고 있다가 컨텐츠의 로드가 완료가 됐을때 스켈레톤이 사라지고 컨텐츠를 보여주는 것이다.

스켈레톤을 왜 사용하는가?

• 유저로부터 해당 웹사이트가 로딩중이라는것을 인지 시켜주기 위해서
• 지루한 로딩시간을 짧게 느껴주게 하기 위함

언제 사용하면 좋은가?

• 페이지에 무거운 컨텐츠들이 들어있을때 ( blog 게시글이나, 기사 내용등 )
• 이커머스 사이트와 같이 여러개의 컴포넌트들의 로딩이 필요한 경우
• 더 나은 사용자 경험을 위해 유저에게 로딩이 되고 있다는 것을 알려주고 싶을때

언제 사용을 안할까?

• 페이지에 컨텐츠가 매우 적을때
• 굉장히 빠른 속도로 컨텐츠 로드가 처리 가능할때

어떤식으로 사용하면 될까?

import React, { useEffect, useState } from "react";

const article = ({ article }: { article: IArticle }) => {

// * 초기 loading state를 true로 설정
  const [loading, setLoading] = useState(true);


// article이 존재해서 로드가 다 되면 loading을 false로
// false가 되면 스켈레톤 이미지가 사라지고 이미지가 노출 
// 여기 예제에서는 직관적으로 skeleton이 잘 노출되는지 보기 위해 setimeout을 사용한것입니다.
// 실제 개발에서는 onLoad 이벤트를 주어 load가 모두 완료되었을때 loading state를 false해야합니다.
// 혹은 IntersectionObserver 같은 api를 사용하여 컨텐츠가 보여져야할 시점에 컨텐츠를 노출시키는 로직을
// 사용하면 됩니다.
  useEffect(() => {
    if (article) {
      setTimeout(() => {
        setLoading(false);
      }, 3000);
    }
  }, [article]);
  return (
    <>
      {loading ? (
        <SkeletonCard />
      ) : (
        <>
          .... 이곳에 정상적으로 노출시킬 컴포넌트를 렌더링 시킵니다.
        </>
      )}
    </>
  );
};

export default article;

1. 첫 렌더링시 노출 시킬 스켈레톤 컴포넌트를 노출 시킵니디다.
2. 그리고 자신의 웹사이트에서 노출시킬 컴포넌트에 onLoad 이벤트를 주거나 IntersectionObserver같은 api를 사용하여 원하는 시점에 메인 컨텐츠를 노출시킵니다
3. loading state가 false가 되면 메인 컴포넌트가 렌더링이 됩니다.

이상 React에서 Skeleton 컴포넌트를 만드는 방법을 간단하게 알아보았습니다!

감사합니다 :)