[Korean FE article] Suspense를 지원하는 라이브러리를 직접 구축하며 Suspense 학습하기

글 링크: https://velog.io/@tap_kim/react-learn-suspense

소개

현재 리액트 18버전에서는 Suspense와 ErrorBoundary가 fetch와 같은 비동기 처리를 지원하지 않습니다. 그래서 fetch와 함께 사용 시 해당 기능을 활용하기위해 tanstack-query 또는 SWR과 같은 라이브러리를 많이 사용할 것으로 예상되는데요.

저 또한 현업에서 이런 라이브러리의 동작 방식에 대해 궁금한 점이 많고 왜 Suspense에선 fetch를 지원하지 않는지에 대해 궁금하던 중, 이글을 통해 궁금증을 해소할 수 있었습니다!

이번 글은 Promise의 각 상태를 이해하고 캐싱 처리를 직접 구축하며, Suspense와 ErrorBoundary를 지원하는 비동기 처리를 구현해 보는 것을 목표로 합니다. 라이브러리를 사용하지 않고 하나씩 구축해 보면서 공부해 보고 싶으신 분들은 이번 기회에 이 글을 통해서 한번 시도해 보시는 것을 추천해 드립니다 :)

목차

• 철학

• 주의: 바운더리 재설정 상태

• 공유 캐시 구축

  • FetchCache 클래스

  • FetchCache Provider

  • useFetch 훅

  • 코드 실행!

• Promise로 데이터 추적하기

• 캐시에서 Promise 사용

• Suspense 활성화 🎉

• 이런. 우린 use()를 재발명했습니다!

• 리뷰

• 끝맺음

  • FetchCacheProvider 구현

  • Suspense에서 놓친 것은 무엇인가요?

  • Transitions