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

개인 프로젝트를 진행하던 도중, API를 통해 받아와야할 데이터가 생각보다 커서 Layout Shift 이슈가 발생하였습니다.
좋은 방법이 없을까 고민하던 도중, React의 <Suspense> 컴포넌트가 생각나
지금 상황에 딱 적용시켜보면 좋을 것 같아 프로젝트에 도입하고자 합니다.

앞으로의 포스팅에서는 제가 어떻게 관련 기술을 리서치하고 사용하는지에 대해 적어보겠습니다.

Suspense Component

Suspense 컴포넌트는 React에서 제공하는 컴포넌트 중 하나입니다.
공식문서에서는 아래와 같이 설명하고 있습니다.

<Suspense> 는 자식 요소가 로드되기 전까지 화면에 대체 UI를 보여줍니다.

코드 예시와 동작 과정

<Suspense fallback={<Loading />}>
  <Albums />
</Suspense>

만약 Albums 컴포넌트가 서버와 통신하는 비동기적인 로직을 담고있고 모든 코드와 데이터가 로드가 되지 않았다면, Suspense 컴포넌트의 props로 전달해준 <Loading> 컴포넌트를 보여줍니다.
그 후 Albums 컴포넌트의 데이터가 모두 준비되면 리액트는 로딩 컴포넌트를 숨기고,
Albums 컴포넌트를 보여줍니다.

---

자, Suspense를 어떻게 사용하는지 알았으니 이번에는 Tanstack Query의 공식 문서를 보러 가보겠습니다.

Tanstack Query의 Suspense

React의 Suspense 컴포넌트를 사용하기 위해서 아래의 전용 hook을 사용하라고 말해줍니다.

• useSuspenseQuery
• useSuspenseInfiniteQuery
• useSuspenseQueries

따라서, React의 Suspense 와 useSuspenseQuery 를 사용하면
이론상으로는 데이터가 불려와 생기는 레이아웃 쉬프트 이슈를 해결할 수 있지 않을까요?

---

일단 제가 도입할 기술들과, 그것들을 어떻게 사용하는지에 대해서 알아보았습니다.
내일은 직접 코드로 옮겨서 작성하는 과정과, 추가적으로 고려해야될 부분은 없는지,
혹은 같이 자주 쓰이는 컴포넌트는 없는지에 대해서도 리서치해 포스팅해보겠습니다.