# reactquery

40개의 포스트
post-thumbnail

react query 커스텀 훅으로 로그인 유지하기 (with. HOC - 고차 컴포넌트)

유저가 로그인하게 되면 헤더에 있는 로그인 / 회원가입 이 마이페이지 / 로그아웃 으로 바뀌어 보여야 했다.처음 헤더에 넣어 바로 유저 상태를 유지했는데, 헤더가 없다면 어떻게 하겠냐는 물음에 제대로 답하지 못했다.헤더에 넣기보단, 유저 상태를 유지해야하는 페이지에 훅

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

React-Query (tanstack-query) SSR 대응하기 (app directory)

React-Query는 기존 Zustand나 Recoil 혹은 Redux와 같은 상태 관리 라이브러리에서 어려운 점들을 해소할 수 있도록 도와주는 라이브러리다. 기존의 상태 관리 라이브러리들은 충분히 훌륭하지만 서버측 상태관리를 하기엔 그다지 적합하지 않은 부분들이 있

2023년 5월 22일
·
0개의 댓글
·
post-thumbnail

reactQuery : refetchInterval

프로젝트 진행 중, 현황을 지속적으로 체크해주고,효율성 및 서버부담을 줄이기 위해 상태에따라 체크를 지속할지 말지 분기처리를 해주어야 했다.useQuery : refetchIntervaluseQuery의 옵션으로 refetchInterval을 사용할 수 있다.일정시간마

2023년 5월 22일
·
0개의 댓글
·

reactQuery 사용기록

진행중인 프로젝트에서 reactQuery를 활용해 보기로 하였다.post요청을 useMutation이 아닌 useQuery로만 구현해보려 했고,여러방법으로 해당 코드를 작성해보았다

2023년 5월 3일
·
0개의 댓글
·
post-thumbnail

React Query - 3 (쿼리 키)

쿼리는 기본적으로 사용자가 부여한 유니크한 키값으로 구분되며, 프로미스 기반 메서드로 서버에서 데이터를 가져올 수 있다.컴포넌트나 훅에서 쿼리를 구독하려면 useQuery를 호출해야 한다.useQuery의 첫번째 파라미터는 사용자가 설정한 고유키값이고, 두번째 파라미터

2023년 4월 27일
·
0개의 댓글
·
post-thumbnail

React Query - 2 (stale data)

useQuery, useInfiniteQuery는 기본적으로 캐시된 데이터를 오래된 데이터 (stale data)로 간주한다.다만, 리액트 쿼리에서는 캐시된 데이터의 stale time을 조정할 수 있는 옵션을 기본으로 제공해주기 때문에 각 쿼리당 데이터를 refetc

2023년 4월 27일
·
0개의 댓글
·
post-thumbnail

React Query - 1 (필요성)

원격에 위치한 공간에 저장되며 앱이 소유하거나 제어하지 않는다.데이터를 가져오고 업데이트 하기 위해선 비동기 API가 필요하다.다른 사람과 소유권이 공유된다.Application에서 데이터가 잠재적으로 out-of-date 상태가 될 수 있다.out-of-date된 데

2023년 4월 27일
·
0개의 댓글
·

배민 주문팀 ReactQuery 세미나 내용정리

v2(React) 프로젝트로 마이그레이션을 진행하던 중 상태관리 및 query fetching에 대한 효율적인 부분을 고민하던 중 ReactQuery가 좋은 대안이 될 수 있겠다고 판단했다. 배민의 세미나를 정리해보자.

2023년 4월 24일
·
0개의 댓글
·
post-thumbnail

무한스크롤 구현하기

개발과 삽질..그 사이 어딘가...✍🏻

2023년 4월 22일
·
0개의 댓글
·

React Query

React Query를 사용하려면 다음과 같이 QueryClientProvider로 감싼 후, client prop으로 qeuryClient를 넣어주면 된다.출처위의 코드는 데이터를 불러와서 state에 넣고 로딩을 false로 해주는 것이다.React Query는 위

2023년 4월 21일
·
0개의 댓글
·
post-thumbnail

React-Query 정리

React-Query란서버 상태 관리를 위한 라이브러리자체적 캐싱 기능이 존재 (Hooks 기반 라이브러리)캐싱, get한 데이터 자동 updating 지원, 중복 호출 컨트롤 지원, 무한 스크롤, 쉬운 비동기 관리React-Query의 라이프 사이클1\. Fetchi

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

2023.02.01

staleTime - refetch 하는 기준이 되는 시간cacheTime - fetch 되었을때, 캐싱된 데이터의 유지시간useQuery의 enable 옵션을 true로 설정쿼리키를 state로 관리하고,fetch 메소드를 구현해둔다.쿼리키 삭제쿼리키 다시 세팅htt

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

[React] React Query 공부하기

GraphQL을 썼던 나는 회사에서 Rest API를 쓰면서 아주 다양한 불편함을 겪는 중... 동기 덕분에 React Query란 라이브러리를 알게 되었고, GraphQL을 썼던 때와 생김새가 비슷하다고 생각됐다 그래도 처음 쓰는 라이브러리이고 많이 사용되고 있는 라

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

invalidateQueries

230120.til

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

React | React Query

UI/UX의 중요성과 함께 프로덕트 규모가 많이 커지고 프론트엔드에서 수행하는 역할이 늘어났다.즉,관리하는 상태가 많아지고 상태관리의 필요성이 중요해졌다. #2. 상태란? 주어

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

[React Query]React Query란

Server State Management for React

2022년 12월 29일
·
0개의 댓글
·

[React] React Query

React Query는 데이터 Fetching, 캐싱, 동기화, 서버 쪽 데이터 업데이트 등을 쉽게 만들어 주는 React 라이브러리입니다.저의 경우 서버로 부터 값을 가져오거나 업데이트 하는 로직을 store 내부에 개발하는 경우가 많습니다. 그렇다보니 store는

2022년 11월 28일
·
0개의 댓글
·

[React] react-query

reactquery궁금하지 않으십니까? 후후 ..

2022년 10월 16일
·
0개의 댓글
·