React Query - useQuery 맛보기

 

React Query는 Ract에서 네트워크 데이터를 처리하며 cache 및 관리까지 지원해주는 라이브러리 입니다.

 

이전에는 Redux 및 Recoil와 같은 상태 관리 라이브러리에 네트워크 처리를 작성하여 처리하는 경우가 많았지만

React-query를 사용하면 Recoil에서는 상태관리를 하고 React-query에서 제공 하는 훅을 사용하여 데이터를 캐싱 및 관리합니다.

 

따라서 상태관리와 데이터 처리를 분리함으로써 훨씬 직관적이며 사용법도 쉽고 많은 기능을 제공하기 때문에 개발자도 쉽게 사용할 수 있습니다.

 

---

Recoil에서 데이터 처리는 아래와 같은 절차가 필요합니다.

 

1. atom 생성

const todoAtom = atom({
  key: '@todo',
  default: [],
});

 

2. selector 정의 및 axios 호춣

const todoSelector = selector({
  key: '@todo/selector',
  get: async ({ get }) => {    
     const todos = await axios.get('/todos');
     return todos;
  },
});

 

3. recoil selector hook 사용

  const todos = useRecoilValue(todoSelector);

 

 

---

하지만 React query에서는 한줄로 완료됩니다.

// const {data} = useQuery({ queryKey: ['todos'], queryFn: getTodos })
const {data} = useQuery('todos', getTodos)