# react-query

830개의 포스트
post-thumbnail

유명 라이브러리의 플러그인은 어떻게 구성되어 있을까? Tanstack-query의 persistQueryClient 플러그인 뜯어보기

React Query 쯤 되면 자바스크립트 말고 외계어로 작성되어 있는 거 아니었음?

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

React Query 사용해보기! - 1

TanStack Query(FKA React Query)는 종종 웹 애플리케이션용 누락된 데이터 가져오기 라이브러리로 설명되지만 좀 더 기술적인 용어로 말하면 웹 애플리케이션에서 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 매우 쉽게 만듭니다.공식 문서를 요약하자

어제
·
0개의 댓글
·
post-thumbnail

[React] TanStack Query (React Query v5)로 마이그레이션 기록

커스텀 훅에서 TanStack Query로 마이그레이션 해보자 (어쩌다 보니 useInfiniteQuery 정리까지)

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

React-Query

서버상태 관리를 쉽게 하도록 도와주는 라이브러리1.fetching: 서버에서 데이터 받아오기2.caching: 서버에서 받아온 데이터를 따로 보관해서 동일한 데이터가 단 시간내에 필요할 시 서버요청없이 보관된 데이터에서 꺼내쓰기3.synchronizing: 서버상의 데

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

[TIL] 아웃소싱 프로젝트 - React Query(Tanstack Query) + Custom Hook 적용기 (feat. v5 단일 객체, 데이터 갱신)

React Query(Tanstack Query) v5 버전 적용 & Custom Hook 모듈화해당 글에서는 React Query(Tanstack Query) 를 React Query라고 지칭하겠다.기존 댓글 CRUD 기능을 댓글 컴포넌트에 전부 넣었었고 코드의 간소

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

[React] 상태 관리 라이브러리란

오늘 알아볼 내용은 리액트의 상태 관리 라이브러리이다.오늘 포스팅에서는 리액트의 상태 관리 라이브러리가 어떻게 등장했고 어떤 종류가 있는지에 대해서 알아볼 것이다.(내용이 많아서 종류별 특징은 다음 포스팅에서 다룰 예정이다..🥹)

3일 전
·
0개의 댓글
·

[TIL] 아웃소싱 프로젝트 - React Query 적용기

Today 댓글 CRUD React Query 적용 완성 코드 파이어베이스 SDK를 사용했고 평소 같았으면 리덕스로 관리했겠지만 향후 계속 사용할 서버 상태 관리 라이브러이고, 손에 익고 눈에 익어야 하니까 React Query를 적용시켰다. 사실 적용시키면서 좀

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

[#37] Google Sheet를 json 형식, API로 가져오기

json 형식의 데이터를 찾기 어려울 때! Google Sheet를 사용하여 json 변환 및 API로 불러오는 것이 가능하다.

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

[React Query] 에 대해서 알아보자!

한동안 플러터에게 뚜드려 맞다가 오랜만에 리액트로 돌아왔습니다🥲어드민 페이지 인수인계를 받고 코드를 살펴보던 중 이전에 프로젝트를 하면서 제대로 다뤄보지 못했던 내용들을 당분간 기록해 볼 예정이다.그 중에서 오늘 다룰 내용은 React Quert!React-Query

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

[React] TanStack Query (React Query v5) 사용해 보기

TanStack Query를 선택한 이유와 간단한 예제 살펴보기

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

[React] React Query

React Query란? 데이터 Fetching, 캐싱, 동기화, 서버 데이터 업데이트 등을 쉽게 만들어 주는 라이브러리이다. 이 외에도 React에서 상태 관리를 하기 위해 MobX, Redux 등 여러 라이브러리가 존재한다. 상태 관리 그렇다면 상태 관리란 무엇일

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

React-query를 뜯어보며 Observer 패턴 알아보기

원티드 프리온보딩 강의에서 오픈소스(react-query와 redux)를 뜯어보며 옵저버 패턴을 깨달았다는 얘기를 하길래 나도 직접 한번 뜯어보기로 했다.React-query는 오픈소스 라이브러리로 누구나 구현된 소스코드를 볼 수 있다.Tanstack에서는 여러 라이브

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

[TIL] React-Query

React-Query 란? 우리는 다른 서버와의 API 통신과 비동기 데이터 관리를 위해 Redux-thunk, Redux-saga 등의 미들웨어를 채택해서 사용했다. 그러나 다음과 같은 문제가 있다. 코드량이 너무 많다. Redux가 비동기 데이터 관리를 위한 전문

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

React Session 로그인 구현(w. 회원가입, JSON Server, react-query): (2) 클라이언트

이전 포스팅에 이어서 이번엔 클라이언트 쪽의 코드를 작성해보자. 클라이언트 클라이언트 코드도 역시 중요한 부분만 체크하며 샥샥 넘어가보자고! 폴더 구조

6일 전
·
0개의 댓글
·

NextJs React-Query Prisma

오늘은 NextJs React-Query Prisma을 이용해 SSR 구현을 만든 과정을 정리한다.먼저 각 모듈을 사용한 이유는 NextJs: SEO최적화, Image, Link등 최적화 후에 vercel을 통한 무료배포React-Query: 적절한 캐싱, DB를 통한

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

React Session 로그인 구현(w. 회원가입, JSON Server, react-query): (1) 서버

Session 방식을 사용한 로그인 방식을 사용해보려고 했는데, 나와있는 예제들이 잘 없길래 내가 만들어가면서 정리하는 포스팅.내가 원하는 Session 방식 로그인 목표는 다음과 같다.회원가입 구현Email 중복 확인Nickname 중복 확인중복 확인을 확인했는지 검

2023년 12월 3일
·
0개의 댓글
·

React Query

(1) 개념 리액트 쿼리란?(2) 기존 미들웨어의 한계 우리는 다른 서버와의 API 통신과 비동기 데이터 관리를 위해 Redux-thunk, Redux-Saga 등 미들웨어를 채택해서 사용할 수 있어요. 하지만 다음과 같은 문제가 있습니다.보일러 플레이트 : 코드량

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

react-Query (2)

Query Instances with and without cache data (캐시 데이터가 있거나 없는 쿼리 인스턴스):A라는 queryKey를 가진 A 쿼리 인스턴스가 mount됩니다.네트워크에서 데이터를 가져와서 불러온 데이터는 A라는 queryKey로 캐싱됩니

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

react-query로 무한스크롤 구현하기 (useInfiniteQuery | nextPageToken | typescript)

react-query의 useInfinityQuery를 사용하여 YouTube 영상을 무한 스크롤로 구현해보자!

2023년 11월 29일
·
0개의 댓글
·