React Query

React Query의 이점

1. 캐싱 

반복적인 비동기 데이터 호출 방지, 최신데이터 : fetch, 기존데이터 : stale

 

2. Client 데이터와 Server 데이터간의 분리 

 

3. React-Query가 데이터를 다루는 방법 : Context API 기반

server 데이터를 관리하는 QueryClient가 Query를 사용할 때 명시하는 Key 기반으로 데이터를 저장한다. QueryClient는 단순히 서버에서 불러온 데이터를 저장하는 용도로 사용

 

4. get의 useQuery

• 첫 번째 파라미터로 unique key를 포함한 배열이 들어간다. 이후 동일한 쿼리를 불러올 때 유용하게 사용된다.
• 첫 번째 파라미터에 들어가는 배열의 첫 요소는 unique key로 사용되고, 두 번째 요소부터는 query 함수 내부의 파라미터로 값들이 전달된다.
• 두 번째 파라미터로 실제 호출하고자 하는 비동기 함수가 들어간다. 이때 함수는 Promise를 반환하는 형태여야 한다.
• 최종 반환 값은 API의 성공, 실패 여부, 반환값을 포함한 객체이다.

5. PUT, UPDATE, DELETE useMutaion

• 반환값은 useQuery와 동일하지만, 처음 사용 시에 post 비동기 함수를 넣어주었다. 이때 useMutation의 첫 번째 파라미터에 비동기 함수가 들어가고, 두 번째 인자로 상황 별 분기 설정이 들어간다는 점이 차이이다.
• 실제 사용 시에는 mutation.mutate 메서드를 사용하고, 첫 번째 인자로 API 호출 시에 전달해주어야하는 데이터를 넣어주면 된다.

 

https://velog.io/@kandy1002/React-Query-%ED%91%B9-%EC%B0%8D%EC%96%B4%EB%A8%B9%EA%B8%B0

[React-Query] React-Query 개념잡기