Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- BFS
- 코딩테스트
- useState
- React.memo
- 완전탐색
- VanillJS
- VanillaJS
- react
- web
- useEffect
- useMemo
- prettier
- python
- pjax
- Custom Hook
- webpack
- useCallback
- await
- canvas
- eslint
- 비동기
- react internals
- seo
- venv
- 프로그래머스
- 환경설정
- Hook
- 코테
- 그리디
- Permutations
Archives
- Today
- Total
Amada Coding Club
[React Suspense] 서스펜스 사용하기 본문
일단 진짜 필요한 부분만 쓰고 나중에 풀어서 쓴다.
suspense는 요약하자면 비동기 처리를 하는 컴포넌트에서 그 비동기 처리가 끝나기 전까지 보여주는 컴포넌트를 더 편리하게 관리하기 위해 리액트에서 제공하는 기능이다.
나는 이걸 연습하려고 할 때 자꾸 작동을 하지 않아서 왜 안되는가 했는데 suspense를 지원하는 라이브러리를 사용해야만 사용이 가능하다
- Relay: graphQL을 기반으로 데이터를 다루는 라이브러리
- SWR: 서버 데이터를 다루는 라이브러리
- React-Query: 서버 데이터를 다루는 라이브러리
- Recoil: 전역 상태 관리 라이브러리
이 네 가지 라이브러리가 대표적인 라이브러리이다(이거 말고도 더 있을 수도 있다)
이 라이브러리에서 사용 가능한 이유는 Suspense가 Promise를 catch하는 위 라이브러리에선 Promise를 Throw하기 때문이다.
그리고 Suspense 안에 Suspense를 넣는 것도 가능하다
이건 추후에 정리..
참고
'Front-End > React' 카테고리의 다른 글
[React Hook Context API] 리액트 Hook 총정리(6) - useContext (Context API) (0) | 2023.02.02 |
---|---|
[create react app / heroku 배포 오류] heroku22 배포 오류 (0) | 2023.01.31 |
[React Hook] 리액트 Hook 총정리(5) - useMemo useCallback (React.memo) (0) | 2023.01.28 |
[React Hook] 리액트 Hook 총정리(4) - Hook 사용 규칙, Hook 제작방법 (0) | 2023.01.28 |
[React Hook] 리액트 Hook 총정리(3) - useEffect (0) | 2023.01.20 |