Amada Coding Club

[React Suspense] 서스펜스 사용하기 본문

Front-End/React

[React Suspense] 서스펜스 사용하기

아마다회장 2023. 7. 12. 14:21

일단 진짜 필요한 부분만 쓰고 나중에 풀어서 쓴다.

suspense는 요약하자면 비동기 처리를 하는 컴포넌트에서 그 비동기 처리가 끝나기 전까지 보여주는 컴포넌트를 더 편리하게 관리하기 위해 리액트에서 제공하는 기능이다. 

나는 이걸 연습하려고 할 때 자꾸 작동을 하지 않아서 왜 안되는가 했는데 suspense를 지원하는 라이브러리를 사용해야만 사용이 가능하다

  • Relay: graphQL을 기반으로 데이터를 다루는 라이브러리
  • SWR: 서버 데이터를 다루는 라이브러리
  • React-Query: 서버 데이터를 다루는 라이브러리
  • Recoil: 전역 상태 관리 라이브러리

이 네 가지 라이브러리가 대표적인 라이브러리이다(이거 말고도 더 있을 수도 있다)

이 라이브러리에서 사용 가능한 이유는 Suspense가 Promise를 catch하는 위 라이브러리에선 Promise를 Throw하기 때문이다. 

그리고 Suspense 안에 Suspense를 넣는 것도 가능하다

이건 추후에 정리..

참고

https://lasbe.tistory.com/160