React Query
-
[React Query] (6) Suspense와 Error Boundary 적용Front-End(Web)/React - 라이브러리들 2022. 11. 3. 04:46
🧐 서론 지난, React 18의 Concurrency(동시성)을 시리즈로 포스팅하면서 비동기의 선언적 로딩인 Suspense와 에러처리인 Error Boundary 에 대해 알아보았다. * Suspense(위, 링크), Error Boundary(아래, 링크) [React] Concurrency(동시성) - #1. Suspense와 React.lazy 🧐 서론 전 회사분들과 진행하는 스터디에서 나는 Suspense와 React.lazy를 통한 코드 스플리팅 부분을 맡게 되었다. Suspense에 대해서만 공부하려고 했다가, Error Boundary나 Transition API 등 관련된 기능 abangpa1ace.tistory.com [React] Concurrecy(동시성) - #2. Error B..
-
[React Query] (5) SSRFront-End(Web)/React - 라이브러리들 2022. 8. 12. 21:12
🧐 서론 지난 포스팅까지 진행하며, React Query를 사용해서 데이터를 다루는 주요 문법들을 정리하였다. 프로젝트를 마이그레이션하며 적용하던 중, Next.js 세팅인 점을 상기했으며 당연히 React Query도 SSR을 위한 솔루션을 제공하는 것을 알았다. Next.js에서의 SSR을 React Query와 함께 사용하기 위해 어떤 방법이 있는지 한 번 정리해보도록 하겠다. 🌺 SSR 사용하기 공식문서는 React Query가 2가지 형태의 SSR을 지원한다고 소개한다. initialData : SSR 메서드로 불러온 응답을 React Query 기본값으로 넣어주는 방법 Hydration : SSR 내에서 prefetch를 통해 쿼리를 불러온 뒤, queryClient에서 dehydrate한 ..
-
[React Query] (4) useMutation()Front-End(Web)/React - 라이브러리들 2022. 8. 10. 20:59
🧐 서론 지난 포스팅까지, useQuery()를 쓰는 다양한 기법들과 더욱 확장된 기능을 위한 훅들을 알아보았다. (useQueries, useInfiniteQuery 등) 계속 언급했듯, useQuery()는 데이터 조회(HTTP 요청의 GET)를 담당하는 훅이다. 이번 포스팅에서는, useMutations() 훅을 통해 POST, PUT, DELETE를 어떻게 핸들링하는지 알아보도록 하겠다! (공식문서는 위 요청을 Mutation으로 구현할 것을 권장한다. useQuery의 onSuccess, onError로 POST도 구현가능하나 가급적 지양) * https://www.youtube.com/watch?v=NYCG1o38oEQ&list=PLC3y8-rFHvwjTELCrPrcZlo6blLBUspd2&i..
-
[React Query] (3) useQuery() 고급 - Parallel, Dependent, Paginated, InfiniteFront-End(Web)/React - 라이브러리들 2022. 8. 2. 01:07
🧐 서론 앞에서는, React Query의 가장 기본 개념이 되는 useQuery() 메서드에 대해 알아보았다. (이는, GET 요청을 담당) 이번 포스팅도 useQuery() 에서 이어지는 내용들이며, 이를 사용하는 다양한 방법들 그리고 확장된 기능들을 구현하기 위해 지원되는 useQuery() 외의 메서드들을 집필해보려고 한다. * https://www.youtube.com/watch?v=2s2iJLLDwgk&list=PLC3y8-rFHvwjTELCrPrcZlo6blLBUspd2&index=14 🌺 useQuery() 더욱 잘 쓰기 - Custom Hook으로 분리하기 아래 예시는 이전에 useQuery() 로 구현한 리스트 페이지이다. import { useQuery } from "react-que..
-
[React Query] (2) useQuery()Front-End(Web)/React - 라이브러리들 2022. 7. 26. 21:14
🧐 서론 첫 번째 포스팅에서는 React Query를 도입하는 배경과 장점, 그리고 기본개념들을 우선 정리하였다. 그리고, 이번 포스팅부터는 실질적으로 다루기 위한 문법들을 정리하려고 한다. React Query에는 주요 개념들이 있었으며, 이번 주제는 비동기 데이터를 지칭하는 쿼리(Queries)를 다루는 문법들이 될 것이다. 쿼리 데이터를 패치하는 useQuery() 메서드와 이 데이터를 다루기 위한 다양한 방법들을 정리해보겠다! * https://www.youtube.com/watch?v=Ev60HKYFM0s&list=PLC3y8-rFHvwjTELCrPrcZlo6blLBUspd2&index=3 🌺 useQuery() : 데이터 패치 Hooks 우선, 어플리케이션의 컴포넌트 트리 최상단에 설정했던 ..
-
[React Query] (1) React Query 시작하기Front-End(Web)/React - 라이브러리들 2022. 7. 25. 18:55
🧐 서론 React에서 사용되는 기술들에 계속해서 관심가지던 도중, 최근 React Query를 통한 API fetching이 많다는 것을 느꼈다. 대게 라이브러리들이 그렇듯, 기존의 fetch() 함수나 axios에 비해 더 많은 기능을 제공할 것이라 생각된다. (패치상태, 캐싱 등) 또한, Redux의 경우를 생각하면 비동기 패치와 상태관리 등을 위해 서드파티 라이브러리 설치가 필수적이었다. (비동기 패치를 위한 Redux-thunk, Redux-saga, 상태관리를 위한 Redux-toolkit 등) 그렇지 않아도 번거로운 Redux 설정이 서드파티로 인해 더욱 비대해지고, 범용적으로 쓰이는 saga는 제너레이션 문법이 요구된다는 등의 사용성 이슈가 존재한다. 유튜브 강의 전개내용을 적당히 분할하면..