🗂️ Suspense Component + useSuspenseQuery 도입기 (2)

저번 글에 이어 이번 포스팅에서는 제가 어떻게 Suspense 컴포넌트와
useSuspenseQuery 를 도입하여 Skeleton UI를 구현하였는지에 대해 포스팅해보겠습니다.

---

Skeleton UI의 필요성을 느낀 부분

먼저 이번 개인 과제는 https://restcountries.com 에서 제공해주는
API를 활용해 나라의 정보들을 보여주는 과제였습니다.
따로 페이지네이션에 대한 안내는 없어, 모든 나라의 데이터를 한 번에 가져오는
https://restcountries.com/v3.1/all API를 호출해 데이터를 가져왔습니다.
하지만 새로고침을 할 때마다 아래와 같은 문제가 발생했습니다.

총 가져올 나라의 데이터는 250개였고, 이 데이터를 한번에 불러와서 리렌더링을 발생시켜보니
위와 같이 나라의 정보가 어색하게 짠! 하고 나타나는 레이아웃 시프트 현상이 발생하였습니다.

현재 저의 환경에서는 불과 1초 혹은 1.5초만에 모든 데이터가 불려와지지만
좋지 않은 환경에서 웹사이트에 접속한다면 최악의 상황에서는 5초 혹은 그 이상의 시간이 지나도
아무것도 보이지 않는 현상이 발생하게 될 것이라고 생각했고,
그 유저는 웹사이트가 작동을 하지 않는것으로 판단하고 데이터가 로드되기 전 화면을 닫아버릴수도 있다고 생각하였습니다.

따라서 조금 더 자연스러운 UX가 뭐가 있을까.. 하며 생각하던 도중 Skeleton UI가 떠올라
구현을 결정하게 되었습니다.

다양한 구현 방식에서의 고민

1. useQuery 훅에서 제공하는 isFetching 과 같은 상태로 사용한다

단순하게 Skeleton UI를 적용시키는 방법중에는 위와 같은 방법도 있었습니다.
데이터를 가져와 렌더링을 해주는 컴포넌트 내에서 조건부 렌더링을 통해
isFetching 상태가 true 라면 Skeleton UI를 보여주고,
isFetching 상태가 false 라면 실제 데이터를 보여주는 방법입니다.

2. React에서 제공하는 Suspense 컴포넌트를 사용한다

React Docs를 탐방하던 도중, <Suspense> 라는 컴포넌트를 발견하게 되었습니다.
Suspense 컴포넌트는 자식 요소가 로드되기 전까지 화면에 대체 UI를 보여주는 컴포넌트로
이 컴포넌트를 사용해서도 구현을 할 수 있었습니다.

어떤 방식이 더 좋을까?

어떤 방식을 사용해 구현할지에 대해 고민해보았는데, 고민의 전제를 아래와 같이 설정하고 결정하였습니다.

어떻게 구현해야 프로젝트의 사이즈가 커져도 유지보수가 용이하고 가독성이 저하되지 않을까?

1. useQuery 훅에서 제공하는 isFetching 과 같은 상태로 사용한다

• 장점 : 단순히 조건부 렌더링만을 사용해서 구현할 수 있어 구현의 난이도가 복잡하지 않다.
• 단점 : 만약 프로젝트의 규모가 커지고 해당 코드를 수정해야되는 상황이 발생했을 경우, 복잡하게 구현된 곳까지 들어가 로직을 확인해야 한다.

2. React에서 제공하는 Suspense 컴포넌트를 사용한다

• 장점 : 컴포넌트 자체에서 Promise 를 catch해 fallback 로더를 표시해주고,
  복잡하게 구현된 곳까지 들어가 로직을 확인하고 일일히 수정해야되는 번거로움이 사라진다.
• 단점 : Suspense 컴포넌트는 Suspense가 가능한 데이터만 컴포넌트를 활성화 시켜준다.
  useEffect 나 이벤트 핸들러 내부에서 가져오는 데이터는 감지하지 않는다.

위의 장점과 단점을 비교해보며 생각해보았을때, 2번의 방식이 제가 생각하는
구현 방식에 더 적합하다고 판단해 Suspense 컴포넌트를 활용하여 구현하기로 결정하였습니다.

구현 과정

1. 먼저 적용시키고자 하는곳에 Suspense 컴포넌트를 감싸준다.

// App.tsx
<Suspense>
  <CountryList />
</Suspense>

2. fallback Props에 들어갈 컴포넌트를 만들고, 넣어준다.

// CountryItemSkeleton.tsx
export const CountryItemSkeleton = () => {
  return (
    <div className="flex h-[260px] w-[292px] animate-pulse flex-col items-center rounded bg-gray-300 p-4 shadow-md" />
  );
};

데이터를 불러오는 중에 보여줄, 즉 Skeleton UI로 사용해줄 컴포넌트를 제작해줍니다.

// App.tsx
<Suspense
  fallback={Array.from({ length: 20 }).map((_, idx) => (
    <CountryItemSkeleton key={idx} />
  ))}
  >
  <CountryList />
</Suspense>

그리고 감싸주었던 Suspense 컴포넌트의 props로 스켈레톤 컴포넌트를 넣어줍니다.

위 과정에서의 고민 - 스켈레톤을 이런 방식으로 사용하는 것이 맞는지

나라의 데이터는 총 250개가 오는데 스켈레톤으로 보여줘야하는 데이터의 양을 얼마정도로 해야 적당한건지,
Suspense 컴포넌트를 위와 같이 사용해서 보여주는것이 맞는건지에 대한 고민이 있었습니다.
이 부분은 질문을 통해 답을 얻어야하는 부분인 것 같습니다.

3. 데이터를 불러오는 CountryList 컴포넌트에 로직을 작성해준다.

// CountryList.tsx
const CountryList = () => {
  const { data: countryList } = useSuspenseQuery({
    queryKey: ["countryList"],
    queryFn: () => api.country.getAllCountry(),
  });

  return (
    <ul className="flex flex-wrap justify-center gap-4">
      {countryList.map((country) => (
        <CountryItem
          key={country.name.common}
          country={country}
        />
      ))}
    </ul>
  );
};

export default CountryList;

위 로직을 작성하며 겪었던 문제

기존에는 useQuery 훅을 사용하여 데이터를 가져오는 로직을 만들었지만,
어째서인지 Suspense 컴포넌트가 작동을 하지 않았습니다.
문제를 마주하고 해결 방법을 찾아보던 도중, React 공식문서의 Suspense 컴포넌트 사용법을 보았는데
위에서 적어놓았듯이 Suspense 컴포넌트는 Suspense 가 가능한 데이터에만 활성화가 됩니다.
따라서 기존에 사용하고 있었던 훅인 useQuery 대신 useSuspenseQuery 훅을 사용해야
정상적으로 작동이 되는것을 파악하고, 수정하였습니다.
이 과정에서도 역시 Tanstack Query 공식문서를 보며 해결하였습니다.

Before / Affer

Before

Affer

---

훨씬 자연스럽지 않나요?
저는 이 기술을 도입하면서 개인적으로도 굉장히 뿌듯했습니다.
앞으로도 개인프로젝트를 진행하면서 유저의 입장에서는 무엇이 불편할까,
그것을 해결하기 위해서는 어떤 방식으로 문제를 해결해야할까에 대해서
고민을 많이 하려고 노력해야겠습니다.