[React] 스켈레톤 로딩 구현하기

스켈레톤 화면에 대한 개념 정리글은 이전에 작성한 글 참고

 

스켈레톤을 구현하려고 한다. api 를 통해 받아온 이미지, 데이터들이 뜨기 전에 회색배경이 나오도록 할 것이다.

예제와 방법은 아래 참고사이트를 통해 진행하였다.

더 나은 UX를 위한 React에서 스켈레톤 컴포넌트 만들기

 

위 사이트의  SandBox (코드 참고하기!)

skeleton (forked) - CodeSandbox

 

위 사이트 코드를  React에 맞게 더 정리해보았다.

new Promise에 대한 설명은 전 글 참고

로딩이 되는지에 따라 화면을 보이게 할 useState를 설정하고, API를 받아와 데이터를 저장하는 data state를 설정한다.

처음 await new Promise(res => setTimeout(res, 3000)); 가 이루어지며 스켈레톤 화면이 보인다.

그후 try안에 로직이 실행된다. 일정한 시간 후 isLoading state가 false되면서 스켈레톤 로딩화면이 사라진다.

그 외 적용하는 방법은 위에 SandBox를 참고하여 작성한다.

function Main() {
  const [isLoading, setIsLoading] = useState(true);
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      setIsLoading(true);
      
      await new Promise(res => setTimeout(res, 3000));
      
      try {
        const response = await axios.get("https://reqres.in/api/users?page=2");
        setData(response.data.data);
        setTimeout(() => setIsLoading(false), 2000);
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    };

    fetchData();
  }, []);

 

---

그외 참고할만한 사이트

https://velog.io/@baby_dev/React%EB%A1%9C-Skeleton-Component-%EB%A7%8C%EB%93%A4%EA%B8%B0

React로 Skeleton Component 만들기

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

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