React-Query
1.[ React-query ] 리액트 쿼리(react-query)란 무엇일까?
최근에 했던 프로젝트에 리액트 쿼리를 활용하려고 했으나 흐지부지 쓰지 못했던게 아쉬워서 제대로 공부하여 다음 프로젝트에서는 제대로 사용하려고 제대로 공부하기 위한 리액트 쿼리 정리이다.여기서 "Query"의 뜻은 데이터 베이스 등에서 원하는 정보를 검색하기 위해 요청하
2.[ React-query ] useQuery로 쿼리 생성하기
최근에 했던 프로젝트에 리액트 쿼리를 활용하려고 했으나 흐지부지 쓰지 못했던게 아쉬워서 제대로 공부하여 다음 프로젝트에서는 제대로 사용하려고 제대로 공부하기 위한 리액트 쿼리 정리이다.먼저 react-query를 사용하기 위해서는 사용하려는 프로젝트에서 "@tansta
3.[ React-query ] Mutation
최근에 했던 프로젝트에 리액트 쿼리를 활용하려고 했으나 흐지부지 쓰지 못했던게 아쉬워서 제대로 공부하여 다음 프로젝트에서는 제대로 사용하려고 제대로 공부하기 위한 리액트 쿼리 정리이다. 1. Mutation이란? Mutation은 데이터를 가져오는 Query와 달리
4.[ React-query ] placeholderData, InitialData
최근에 했던 프로젝트에 리액트 쿼리를 활용하려고 했으나 흐지부지 쓰지 못했던게 아쉬워서 다음 프로젝트에서는 제대로 사용하려고 공부하기 위한 리액트 쿼리 정리이다.일반적으로 사용자에게 보여주고 싶은 정보가 있을 때 캐시에 아직 데이터가 없는 경우 미리 데이터를 채워서 뷰
5.[ React-query ] prefetching
최근에 했던 프로젝트에 리액트 쿼리를 활용하려고 했으나 흐지부지 쓰지 못했던게 아쉬워서 다음 프로젝트에서는 제대로 사용하려고 공부하기 위한 리액트 쿼리 정리이다.Data prefetching은 데이터를 사전에 가져온다는 뜻이다.즉, 사용자가 렌더링 할 데이터를 미리 서
6.[ React-query ] useQuery의 select
최근에 했던 프로젝트에 리액트 쿼리를 활용하려고 했으나 흐지부지 쓰지 못했던게 아쉬워서 다음 프로젝트에서는 제대로 사용하려고 공부하기 위한 리액트 쿼리 정리이다. 1. select옵션이란? useQuery에 queryFn에서 받아온 데이터를 변환해주는 옵션이다.
7.[ React-query ] useQuery의 refetch옵션
최근에 했던 프로젝트에 리액트 쿼리를 활용하려고 했으나 흐지부지 쓰지 못했던게 아쉬워서 다음 프로젝트에서는 제대로 사용하려고 공부하기 위한 리액트 쿼리 정리이다.리페치는 react-query에서 캐시에 저장된 데이터가 stale 즉, 만료된 데이터이고 특정 조건을 만족
8.[ React-query ] 전역 Refetch
최근에 했던 프로젝트에 리액트 쿼리를 활용하려고 했으나 흐지부지 쓰지 못했던게 아쉬워서 다음 프로젝트에서는 제대로 사용하려고 공부하기 위한 리액트 쿼리 정리이다.전역 Refetch옵션은 말 그대로 모든 useQuery와 prefetch쿼리 적용의 디폴트 옵션을 정해주는
9.[ React-query ] setQueryData, getQueryData, inValidateQuries
최근에 했던 프로젝트에 리액트 쿼리를 활용하려고 했으나 흐지부지 쓰지 못했던게 아쉬워서 다음 프로젝트에서는 제대로 사용하려고 공부하기 위한 리액트 쿼리 정리이다.mutation으로 데이터를 업데이트 했을 때 캐시에 있는 데이터는 어떻게 업데이트할 수 있을까?대표적으로