# react-query

392개의 포스트
post-thumbnail

[Error] No QueryClient set, use QueryClientProvider to set one

노마드 코더 강의를 따라서 진행하던 중, 코드가 실행이 안돼 여러 방법을 써보다가 다행히 해결해서 글을 써본다.강의는 react-router-dom v5버전으로 진행되었지만 나는 v6으로 코드를 작성해서 도저히 다른점을 찾을수가 없었는데, 그냥 import 문제임을 알

약 22시간 전
·
0개의 댓글
·

[ React-Query ] 총 정리

https://tech.kakao.com/wp-content/uploads/2022/06/01.png어플리케이션의 비동기 데이터를 쉽게 관리, 캐시 및 동기화할 수 있는 React용 라이브러리사용자 인터랙션에 따른 데이터의 fetching, caching, u

어제
·
0개의 댓글
·
post-thumbnail

React Query - Hydration(SSR)

https://gingerkang.tistory.com/123

3일 전
·
0개의 댓글
·
post-thumbnail

Suspense, Error Boundary로 비동기 로딩, 에러 로직 공통화하기(feat. Next.js, React-Query)

충림이, refashion 프로젝트를 진행하던 중 컴포넌트에서 반복적으로 작성했던 에러, 로딩 처리가 비효율적이라는 것을 계속 깨닫고 있었고 이를 꼭 개선하고 싶었습니다. 때문에 검색을 통해 토스의 한재엽님, 박서진님이 공유해주신 자료를 보며 개선할 수 있게 되었고 제

3일 전
·
0개의 댓글
·
post-thumbnail

Server State는 뭐고, React Query는 왜 쓰는가?

react-query 를 쓰라고 해서 쓰긴 쓰는데.. 이걸 왜 써야 하는 걸까?

6일 전
·
0개의 댓글
·

[React] React Query

React Query란? > ✅Server State, 비동기 데이터를 관리하는 라이브러리 useQuery hook 안에서 API get 요청을 담당, API 요청 결과 및 다양한 상태를 바로 사용할 수 있다. API 요청시 queryKey가 API 요청결과를 cac

6일 전
·
0개의 댓글
·
post-thumbnail

원티드 프리온보딩 Todolist 만들기 회고

원티드 프리온보딩 1월에 시작한 todolist를 사전과제로 제출했었다.typescript,CRA를 이용해서 상태관리는 props로 넘겨주는 형태로 개발했었다.처음 강의를 들었을 때 폴더 구조를 쉽게 구성해야 다른사람이 보기도 쉽고내가 나중에 코드를 확인하려고 했을 때

2023년 1월 20일
·
0개의 댓글
·

[react query] 리액트쿼리에 대해 찾아보다 좋은 글을 찾았다!

카카오페이 기술블로그https://tech.kakaopay.com/post/react-query-2/역시 대기업 기술블로그 뜯어보는게 최고야공책에 정리해가면서 읽었는데 아직 반절정도만 읽었는데도 꿀이 넘친다블로그에도 정리를 해야겠다 싶어서...

2023년 1월 20일
·
0개의 댓글
·
post-thumbnail

[Next JS] next.js react query 무한스크롤

next.js typescript으로 구현한 무한스크롤

2023년 1월 20일
·
0개의 댓글
·

[ReactQuery]

isFetching 비동기 쿼리가 해결되지 않았음을 의미캐시가 있어도 계속 보임isLoading isFetching은 참인 상태 쿼리에 대해 캐시된 데이터가 없음 isFetching의 하위stale data만료된 데이터데이터 리페칭은 만료된 데이터일 때만 실행됨stal

2023년 1월 19일
·
0개의 댓글
·
post-thumbnail

React Query 공부 (5) 무한스크롤 구현하기(Next.js)

유저가 데이터의 바닥에 닿으면 방해없이 스크롤을 계속하게 하기 위해 새로운 데이터를 fetch 할 것데이터를 한번에 불러오는 방법보다 효율적인 방법. react-query의 useInfiniteQuery를 사용한다.

2023년 1월 19일
·
0개의 댓글
·
post-thumbnail

[react] React Query 기초

커머스 인하우스 신입 프론트엔드 개발자로 취업한지 2달정도 되었다. 현재 회사는 3개의 사이트를 가지고 있는데 1개만 자체솔루션이고 2개는 쇼핑몰 웹 솔루션을 사용하고 있다. 일반 솔루션을 사용하면 개발에 한정적이고 재고를 정확하게 관리하기 힘들기 때문에 하반기에...

2023년 1월 18일
·
0개의 댓글
·

[React Query] stale-while-revalidate: 너 상한데이터니?

타입스크립트에 이어서 리액트쿼리까지 투두 앱에 적용해보았다.그런데 리액트쿼리를 쓰면서 기시감이 느껴졌다.이거... 리덕스랑 똑같은거같은디?결론적으로 리덕스는 상태관리를 위해 쓰는데, 리액트쿼리는 이 상태 에서 서버상태를 분리해 관리할 수 있도록 한다.이렇게 UI sta

2023년 1월 18일
·
0개의 댓글
·
post-thumbnail

[React] No QueryClient set, use QueryClientProvider to set one(error)

react-query 사용시 App.ts 를 감싸주어야한다.QueryClientProvider 로 감싸주지 않아서 생겼던 오류!

2023년 1월 18일
·
0개의 댓글
·
post-thumbnail

React-Query

React를 위한 강력하고 성능 좋은 데이터 동기화 "전역 상태"를 건드리지 않고도 React 및 React Native 애플리케이션에서 데이터를 가져오고, 캐시하고, 업데이트할 수 있다. React Query는 종종 React에 대한 누락된 데이터 가져오기 라이브러리

2023년 1월 18일
·
0개의 댓글
·
post-thumbnail

React Query - Testing

Testing에서도 useQuery에 대한 QueryClient가 설정되어있는 앱 컴포넌트를 랜더링시켜줘야 한다.QueryClient Provider 없이는 어떠한 React Query hook도 사용할 수 없을 것읻,

2023년 1월 17일
·
0개의 댓글
·
post-thumbnail

React Query - 낙관적 업데이트

🚀 Start 앞서 구현해본 쿼리 무효화를 통한 데이터 업데이트는 한가지 단점이 존재한다. 아래의 network 관리창을 확인해보면 appointments 데이터가 두번 통신한 것을 확인할 수 있다. 왜냐하면 한번은 기존의 데이터가 요청되었다가 무효화되었고, 새

2023년 1월 17일
·
0개의 댓글
·

react-query, Typescript: Error 타입 지정하기

error 인수 타입 처리에서 'Object is of type 'unknown'.' 에러가 발생하면 어떻게 해야 할까

2023년 1월 17일
·
0개의 댓글
·
post-thumbnail

React Query - 쿼리 무효화

지금까지는 데이터를 가져오는 방식의 query 요청에서 대해서 커스텀훅을 사용하여 전역적으로 사용할 수 있게 하는 방법들에 대해 알아보았다. 이번엔 데이터 업데이트에 대한 mutate 요청에 대해서도 커스텀훅을 사용하여 전역적으로 패칭이 가능하게 하고 그에 대한 에러

2023년 1월 17일
·
0개의 댓글
·
post-thumbnail

React Query 공부 (4)

prefetching 사용 / isLoading vs isFetching

2023년 1월 17일
·
0개의 댓글
·