# react-query

shinwonse

다음과 같은 코드를 react-query 를 사용하여 fetch 로직을 따로 분리하도록 하겠다.src/api.ts이렇게 fetch 로직을 api.ts 파일에 따로 분리해둔다. 이 때 async await 형식이 아닌 오래된 방식인 fetch 방식을 사용하였다.src/r

winters0727

React Query는 React App에서 서버의 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트하는 작업을 도와주는 라이브러리복잡하고 장황한 코드가 필요한 다른 데이터 불러오기 방식과 달리 React Component 내부에서 간단하고 직관적으로 API를

jae-hun-e

이제 coin page에서 nesting router로 탭을 구현하고 그 안에서 chart를 보여줄 것이다. 먼저 Coins, Coin을 만들어준 것과 같이 coin.tsx안에 chart, price 라우터와 들어갈 수 있는 링크를 만들어준다. 여기서 신기함점이 백

jae-hun-e

async await fetch하는것과react-query를 사용하는 것의 차이점 그냥 fetch하는 것은 url이 바뀌면 data가 사라지지만 react-query를 사용하면 cashing되기 때문에 url이 바뀌어도 data가 사라지지 않는다. react-quer

qorgkr26

React Query란 > 스스로 공부하고 찾아보며 기술을 적용했기 때문에 분명 틀린 점이 있을 수 있습니다. 틀린 점은 댓글에 지적해주시면 감사하겠습니다. 회사에 입사하고 첫 실무에 들어가며 만난 프레임워크들은 입사 전에는 한 번도 사용해보지 않았던 것들이었다.(N

aptakqmf12

SWR은 React-Query와 함께 데이터Fetching 라이브러리다.SWR은 매번 지속적으로 요청을 보내거나, 페이지에 포커싱을 했을시 업데이트가 되는 등 기능이 있다단, 데이터를 가져오는 get에 특화된 라이브러리다.최초에 데이터를 가져온뒤 매번 불필요한 호출로

raverana96

react-query의 query문을 붙여둔 component가 unmount되면 무슨 일이 일어날까?? 그동안 당연히 unmount되면 disable 되면서 cancel이 될 것이라고 생각했는데... 놀랍게도 아니었다! (이는 mutation도 해당이다.)By def

kimhyo_0218

이전 시리즈에서 더 나아가 useQuery를 회사에서 어떻게 쓰고 있는지 정리해두려 한다.QueryClient 에서 추가적으로 defaultOptions 를 적용할 수 있다.refetchOnMount, refetchOnReconnect, refetchOnWindowFo

kimhyo_0218

회사에서 사용 중인 리액트 쿼리.server state를 아주 효율적으로 관리할 수 있는 라이브러리이다.기존에 isLoading, isError, refetch, 데이터 캐싱 등 개발자가 직접 만들려면 꽤 귀찮거나 까다로웠던 기능을 제공해준다.리액트 쿼리 사용을 위해

raverana96

이번 프로젝트에서 유저 목록을 보여줄 때, Infinite Scroll기법을 사용해서 데이터를 보여주기로 결정하였다. react-query에 useInfiniteQuery hook이 있어서 사용해보려고 했는데, 생각보다 공식문서 설명이 부족한 것 같아서 실제 코드를 가

devchoi

if(kakao) 2021에서 '카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유' 세션을 듣고 작성한 내용 정리 및 후기입니다.

with-key

react-query 에서 POST 요청 다루기

with-key

React-query 에서 POST 요청 다루기

with-key

React-query에서 POST 요청 다루기

turret1234

React-Query는 React엡에서 비동기 로직을 쉽게 처리할 수 있게 해주는 라이브러리입니다. 이전까지는 Redux와 Saga를 이용해서 비동기 로직을 많이 관리했는데 최근 React-Query를 이용하여 비동기 로직 관리를 많이 사용한다고 하여 포스팅 하게 되었

ki226

기록용으로 올리는 react-query, recoil, typescript를 사용한 custom hook유저 정보 불러오기 custom hookaccess 토큰 갱신 custom hook

with-key

react-query : Data transformation

ki226

기록 & 참고용 login with react-query, useMutation 간단 예시

raverana96

이전에 쓴 \[react-query] useQuery의 데이터 불변성을 지켜야할까?? 와 이어진다. 이전 글에서는 useQuery로 받아온 data를 어떻게 건들이지 않아야하는지를 다뤘다. 이번에는 해당 데이터를 어떻게 수정해서 mutate까지 이어지는지 적어보고자

raverana96

개요 이전에 유저별 등록 게임 모달을 만들면서 유저별로 등록한 게임을 다루면서 유저가 직접 게임의 우선순위를 부여할 수 있게 하기 위해서 react-beautiful-dnd 라이브러리를 사용해서 직접 조정할 수 있게 만들었었다. 서버와의 연결을 해서 유저가 등록한