# react-query

148개의 포스트
post-thumbnail

[React] react-query

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

약 1시간 전
·
0개의 댓글

React Query - Basic

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

약 24시간 전
·
0개의 댓글
post-thumbnail

서버에서 데이터 읽기: useQuery

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

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

react query 사용기

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

2022년 6월 22일
·
0개의 댓글
post-thumbnail

상태관리는 대체 어떻게 해야하는거야! - 1

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

2022년 6월 22일
·
2개의 댓글

Front-End(feat. React)에서 서버 상태 관리

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

2022년 6월 20일
·
0개의 댓글

React Query 란 ?

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

2022년 6월 19일
·
0개의 댓글

[react-query] useInfiniteQuery

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

2022년 6월 17일
·
0개의 댓글
post-thumbnail

[Next] Next + react-query prefetchInfiniteQuery에서 계속 같은 page가 반복되고 새로 fetching 안 되는 에러

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

2022년 6월 13일
·
0개의 댓글

react-query가 redux같은 전역 상태관리 라이브러리를 대체할 수 있을까

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

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

[React] React Query

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

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

react query 사용기 - 1

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

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

[TIL] React Query, SSR, 토스 컨퍼런스 SLASH22 1일차 세션

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

2022년 6월 8일
·
0개의 댓글

쇼핑몰 프로젝트 1일차(clone-coding)

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

2022년 6월 7일
·
0개의 댓글
post-thumbnail

Infinite Scroll

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

2022년 6월 7일
·
0개의 댓글
post-thumbnail

AWS와 React Query를 활용한 CRUD 만들기

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

2022년 6월 2일
·
9개의 댓글
post-thumbnail

[ERROR] react-query : invalidateQueries 를 해도 refetch 가 되지 않는다

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

2022년 6월 2일
·
0개의 댓글
post-thumbnail

React Query 시작하기

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

2022년 6월 2일
·
0개의 댓글
post-thumbnail

React Query

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

2022년 6월 1일
·
0개의 댓글
post-thumbnail

React Query enabled 속성에 대해

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

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