Suspense
React v18 에서 실험단계를 벗어난 Suspense 에 대해서 좀 더 알아봤다.
Suspense 는 데이터를 불러오는 컴포넌트를 사용할 때, 데이터 로드가 완료되는 시점 (fulfilled) 에 렌더링을 할 수있도록 도와준다, 만약 데이터가 로드되지 않은 상태라면 fallback props 를 통해 Loading 과 같은 임시적으로 보여줄 컴포넌트를 보여줄 수 있다.
사용법은 데이터를 불러오는 컴포넌트를 Suspense 로 감싸서 사용하는데, 사용 예제같은 것을 확인해보니 react-query 나 swr 에서는 suspended 상태로 만드는 옵션과 함께 간단히 사용할 수 있었다.
만약 내가 사용하고 있는 fetch 관련 hook 이 있다면, suspended 상태로 만들도록 확장하면 되지 않을까? 란 생각으로 다른 블로그 컨텐츠를 확인해보았다.
결론적으로는 Suspense 라는 것이 fetch 를 하는 함수에서 의도적으로 예외상태를 throw 하여 해당 throw 를 Suspense 컴포넌트 내부의 componentDidCatch 에서 분류하여 작업을 하는 로직을 사용하는 듯 보였다.
만약 내가 사용하는 useFetch 가 다른 프로젝트에서도 쓰인다고 생각이 들었을 때, suspended 를 고려한 로직을 추가한다면 무조건 Suspense 와 함께 쓰여야 하므로 useFetch 라는 이름으로 쓰이기는 어렵겠다는 생각이 들었다. (혹은 react-query 의 useQuery 처럼 옵션을 통해 분기를 하거나.)
참고
- https://jbee.io/react/error-declarative-handling-1/
- https://charles-stover.medium.com/react-suspense-with-the-fetch-api-a1b7369b0469
