# tanstack-query

30개의 포스트
post-thumbnail

React - React Query(TanStack Query)

웹 애플리케이션에서 데이터 패칭, 캐싱, 상태 관리 등의 복잡한 작업을 간소화하고 효율적으로 수행할수 있도록 도와주는 React Query에 대해서 학습하고 직접 사용해보자.

2023년 9월 23일
·
0개의 댓글
·
post-thumbnail

무한스크롤 구현하기(useInfiniteQuery, 커서 기반 페이지네이션)

팀바팀의 팀 피드 기능에 무한스크롤 기능이 있어서 구현해보았다. 사실 이 기능은 레벨3때 구현했는데 레벨4와서 요구사항이 바뀌는 바람에.. 정방향 무한스크롤(아래로 스크롤 할 때 무한스크롤)과 역방향 무한스크롤(위로 스크롤 할 때 무한스크롤) 둘다 구현하는 경험을

2023년 9월 14일
·
2개의 댓글
·

recoil, react-query todoList - chatGPT

react todo list with recoil & react-query

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

[라이브러리] React-Query 개념, 기본 사용법

동아리 네트워킹에서 리액트 쿼리에 대해 많이 알고 사용하고 있다는 것을 알게 되었다.캐싱, 값 없데이트 등 여러 기능을 활용하면 최적화와 개발시 편리성을 동시에 잡을 수 있을 것 이라 생각 되어서 빠르게 공부하고 프로젝트 개발시 사용해야겠다고 생각이 들었다.현재는 v4

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

TanStack Query 잘 사용하기

TanStack Query를 회사 실무에서 사용하면서 최근에 내가 놓쳤던 부분들에 대해 정리해보려고 한다.

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

비동기 데이터 패칭의 로딩, 에러 상태 분리하기 (with Tanstack Query, Suspense, Error Boundary)

비동기 데이터 패칭 패턴 컴포넌트에서 외부 데이터를 패칭해 사용하는 경우 아래와 같은 패턴을 많이 사용합니다. 위와 같은 패턴은 아무 이상없이 잘 작동하지만 데이터 패칭의 에러, 로딩, 성공 상태를 모두 한 컴포넌트 안에서 다루기 때문에 코드가 복잡해지며 비즈니스 로

2023년 8월 12일
·
1개의 댓글
·
post-thumbnail

Optimistic Update 구현하기 (tanstack query)

optimistic update 기술을 적용해보기로 했다

2023년 8월 1일
·
2개의 댓글
·
post-thumbnail

이미지 로딩 경험 개선하기 2 (feat. suspense)

프로젝트 진행을 하면서 tanstack query를 도입하게 됐는데, 이번에는 useQuery의 suspense 옵션을 활용해 문제를 해결해보았다

2023년 7월 31일
·
1개의 댓글
·

[TanStack Query] queryClient초기화관련

App.tsx(최상위 컴포넌트)에서 queryClient를 초기화해주면 다른 컴포넌트에서 안 해줘야하는건가?하위컴포넌트의 useMutation에서 invalidateQueries()를 쓰기 위해서는 queryClient가 있어야하는데, 다시 불러오려면 redux로 qu

2023년 7월 31일
·
0개의 댓글
·

tanstack query V5 에서 사라진 onSuccess, onError, onSettled

onSuccess, onError and onSettled have been removed from Queries. They haven't been touched for Mutations. Please see this RFC for motivations behind t

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

[next13] _app, ts, 그리고 react query

next에서 리액트쿼리를 세팅하면서 타입을 어떻게 세팅해야 할지 막막해서 알아보았다.\_app.js에서 리액트쿼리를 세팅하는 코드임.타입스크립트로 하다보니 props(Component, pageProps) 부분에서 타입에러가 발생했다.넥스트로 세번째 프로젝트를 해보는건

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

[월간기록]회사에서 경험한 리액트 쿼리 리팩터링 경험

리팩터링을 통하여 알게된 리액트 쿼리

2023년 7월 15일
·
0개의 댓글
·
post-thumbnail

[React-query] TanStack-Query (a.k.a react-query) 다뤄보기

개인 프로젝트이던 팀 프로젝트이던 사용하는 데이터 통신들이 복잡해질수록 react-query의 필요성을 크게 느끼고 적용해왔다. 하지만 공식문서를 정독하거나, 효율적으로 사용을 한 건 아닌 것 같다. 따라서 다시 제대로 공부하고 정리하는 시간을 가지며 프로젝트에 더 좋

2023년 7월 12일
·
1개의 댓글
·
post-thumbnail

독서기록 웹사이트 개발

Next.js와 Prisma로 만든 독서 기록 반응형 웹사이트

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

[번역] React Query 적으로 사고하기

React Query Maintainer인 Tkdodo가 알려주는 리액트 쿼리적으로 사고할 수 있는 3가지 요소들을 다루어봅니다.

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

invalidateQueries사용한 useQuery캐시 관리

invalidateQueries를 활용하여 캐시 관리를 하자

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

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

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

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

# 14 리액트 쿼리(with TanStack Query)

✔ 네트워크에서 가져온 데이터를 상태관리 할 수 있게 도와주는 라이브러리 중 가장 많이 쓰임

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