[개발 일지] Suspense를 이용하여 모든 api에 Loading 화면을 설정하자 (NextJS, Suspense)

Suspense란 무엇일까?

Suspense란, 아직 렌더링이 준비되지 않은 컴포넌트가 있을 때 로딩 화면을 보여주고 로딩이 완료되면 해당 컴포넌트를 보여주는 React에 내장되어 있는 기능입니다. SPA(Single-page-Application)의 단점은 한 번에 사용하지 않는 모든 컴포넌트까지 불러오기 때문에 첫 화면이 렌더링 될 때까지 시간이 오래걸리기는 것입니다. React는 lazy를 통해 컴포넌트를 동적으로 import하여 초기 렌더링 지연시간을 어느 정도 줄여줄 수 있습니다.

const SomeComponent = React.lazy(() => import('./SomeComponent'));

Router로 분기가 나누어진 컴포넌트들을 위 코드처럼 lazy를 통해 import하면 해당 path로 이동할때 컴포넌트를 불러오게 되는데 이 과정에서 로딩하는 시간이 생기게 됩니다.. 이 로딩되는 시간동안 로딩 화면을 보여지도록 해주는 역할을 하는 것이 바로 Suspense입니다.

 

저는 프로젝트에서 react의 <Suspense>와 React-query의 defaultOptions을 이용하여 Loading을 설정해주었습니다. 기존 코드는

const {isLoading,data} = useGetProfile();
...
if(isLoading) return <Loader />

위처럼 api를 사용하는 모든 페이지의 모든 api의 isLoading상태를 가져와 <Loader />를 return하도록 설정하였는데, 이러한 번거로움을 한 번에 제거해주었습니다.

PR : https://github.com/Att-ies/frontend/pull/282

리팩토링 : 디자인 수정 & 오류 수정 by gueit214 · Pull Request #282 · Att-ies/frontend

프로젝트에 도입 한 코드

매 번 설정해주었던 retry:0도 기본값으로 설정해주었습니다. retry를 다른 값으로 바꾸고 싶으면 각 query에서 설정해주면 됩니다.

마지막으로, 저희 프로젝트의 로딩화면 보여주고 마무리하겠습니다.

---

이런 유익한 기능이 있었다니.. 모든 기능 구현하는 방법을 처음부터 알 수는 없어도, 내가 사용하는 라이브러리에 '어떠한 기능'이 있는지는 알고 있어야 한다는 것을 알았다. 어떠한 라이브러리를 도입하기 전에, '어떠한 기능'이 있는지 싹 훑고, 정리하고 하도록 하자. 이 코드를 작성하며, 좋아할 팀원들을 상상하니 흐뭇했다.