# react-query

leeseooo

말로만 듣던 react-query 직접 써보기

simplicityyy

참고자료 : React Query와 상태관리 :: 2월 우아한테크세미나 공식 문서에서는 아래와 같이 명시되어 있으며, '리액트에서 데이터 fetch, 캐싱 그리고 데이터 업데이트를 간편하게 지원해주는 라이브러리'이다. Fetch, cache and update dat

gooorang

fresh: 신선한 상태일 때 refetch 하지 않는다.stale: 신선하지 않은 상태일 때 아래의 경우에 refetch 한다.New instances of the query mountThe window is refocusedThe network is reconnec

otterp

Overview 이번 프로젝트에서는 react-query를 사용해보기로 했다. 왜 사용하기로 했냐면 저번 recoil을 사용할때 suspense가 멋지게 동작하고 캐시처리 까지 해줘서 였던 것 같은데(react-query도 이 두가지 기능을 다 가지고 있으니까) 공식문서를 슥 훑어보니 이거 당장 사용할 수 있겠는데? 그런 생각도 들었기 때문이다. 물론 절반...

himprover

프론트엔드 상태관리를 항상 고민한 사람들에게... (나포함)

kingth

Redux, Mobx같은 전역 상태 관리 라이브러리를 많이 사용하고 있었을 것이다. 해당 라이브러리들은 비동기 작업을 하기 위해선 추가적으로 작성해야하는 코드 양이 늘어난다.배보다 배꼽이 더 큰 상황이 되는 것이다.예로 redux-saga 코드를 작성해 보았다.Reac

taehong0-0

React Query는 데이터 Fetching, 캐싱, 동기화, 서버 쪽 데이터 업데이트 등을 쉽게 만들어 주는 React 라이브러리이다. 기존에 Redux, Mobx, Recoil과 같은 다양하고 훌륭한 상태 관리 라이브러리들이 있긴 하지만, 클라이언트 쪽의 데이터들

cnsrn1874

기존 데이터에 더해 데이터를 "더 불러와서" 렌더링 하는 것이나 "무한 스크롤"은 매우 흔한 UI 패턴입니다. React Query는 이런 리스트형 데이터를 요청하기 위해, useQuery의 유용한 버전인 useInfiniteQuery를 지원합니다.useInfinite

raverana96

Next js와 react-query를 함께 사용하여 Infinite Query의 첫 부분을 prefetch 시동중이었다. 어디서 에러가 났는지 제대로 알려주지 않아서 일일히 콘솔을 찍어가면 찾아낸 결과..중간에 로딩이 길지만, 서버에서는 제대로 prefetch를 하나

minkuk90

react-query는 서버 상태를 다루는 라이브러리다. redux, mobx 등은 클라이언트 상태를 다루는 라이브러리다. 즉, react-query는 전역 상태관리 라이브러리가 아니라 서버와 클라이언트 간의 비동기 작업을 쉽게 해주는 라이브러리다. 다만 react-

rik963

useQuery는 서버로부터 비동기로 데이터를 조회할 때 사용되는 custom hook이다. useQuery를 사용하면 기존에 isLoading, isError, refetch, 데이터 캐싱 등 개발자가 직접 구현하려면 꽤 귀찮거나 까다로웠던 기능을 제공해주기 때문에,

jungjh123456

redux와 redux-saga만을 이용하여 프로젝트를 진행하였다.하지만 refresh로 다시 api호출하는 것이 유저 측면에서도 안좋다고 생각을 해서 찾아보니 react query라는 라이브러리가 있었다.설치 방법은 간단하였다.문서에 가면 이렇게 설치를 진행하고 qu

jiaegong

다른 프로젝트 아키텍쳐에서 React Query를 사용한 것을 본 적이 있는데, 오늘 토스 컨퍼런스에서도 React Query가 언급되어서 찾아봤다.React Query란 데이터 패칭 라이브러리다. 데이터를 패칭하는 기능 뿐만 아니라 Devtools, 캐싱, 서버 상태

kip

react-query와 swr을 제대로 써보지 않아, 클론코딩을 통해서 한번 접해보려한다. 인프런의 정재남강사님이 하시는 쇼핑몰 프로젝트고 어떤 식으로 코딩을 하는지 정확하게 한번 살펴보고, 또 이분의 js강의를 들어왔던 터라 궁금하기도 했다. 아마 이번이 클론코딩은 마지막이 되지 않을까.. 토이 프로젝트를 진행하며 혼자 만들어보면서 나름 어느정도 페이지...

ajrfyd

응답 데이터에 다음 페이지에 대한 정보가 없을 경우리턴값에 다음 페이지에 필요한 정보를 적어 리턴 한다. 마지막 페이지에 대한 조건도 처리 해야 하나 생략함그리고 명령형으로 if를 활용해 로딩중인 상태에 대한 컴포넌트를 보여주게 된다면 인피니트 스크롤이 제대로 작동하지

hhhminme

오늘은 동아리 세미나때 함께 제공하기 위해 준비한 작고 귀여운 예제를 어떻게 만들었는지 공유해드릴려고 합니다.

b00032

파라미터로 넣어준 쿼리키에 해당하는 쿼리를 명시적으로 stale 하다고 알려주고, 해당 쿼리 데이터를 새로 받아온다. ( refetch )refetch() 는 데이터의 stale 함과 상관 없이 & 쿼리에 대한 observer 가 없더라도 항상 refetch 하지만,i

jun_n3

리액트 쿼리를 도입해보자.

moment_log

React Query에 대해 알아보자!! 🤔

rjc1704

먼저 useQuery의 options 중 enabled에 대한 공식문서를 먼저 보는 것이 순서이다.boolean type을 넣어야 한다고 심플하게 쓰여 있다.사실 이렇게만 써있으면, 많은 주니어 개발자들은 혼동하기 쉽다. number 또는 string type의 변수가