[ React ] usequery - 1

📝React query 사용해보기

✅ 1. 설치

 $ npm i react-query

✅ 2. 예시

App.js 👇🏻

 import {
   //useQuery,
   //useMutation,
   //useQueryClient,
   QueryClient,
   QueryClientProvider,
 } from 'react-query'
import MainTodos from './components/MainProducts';

 
 // Create a client
 const queryClient = new QueryClient()
 
 function App() {
   return (
     // Provide the client to your App
     <QueryClientProvider client={queryClient}>
       <Mainproducts />
     </QueryClientProvider>
   )
 }

Todos.jsx 👇🏻

import { useQuery } from 'react-query';

export default function todos() {
  // const [loading, error, products] = useProducts({ salesOnly: checked });
  // 대신
  const { isLoading, error, data: products } = useQuery(['todos'], async //async 넣어줘야함 () => {
    console.log('fetching...');
 
    return fetch(`data/todos.json`)
      .then((res) => res.json())
  }
  )

	...
  return (
    <>
      <ul>
        {todos.map((item) => (
          <li key={item.id}>
            <article>
              <h3>{item.name}</h3>
              <p>{item.price}</p>
            </article>
          </li>
        ))}
      </ul>
    </>
  );
}

✅ 3. 결과

• console.log('fetching...') 결과 fetching 이 한번만 나오는걸 확인해볼수 있다.
• 예를 들어 A의 컴포넌트가 usequery를 사용했을때 네트워크 통신을 요청해 네트워크에서 데이터를 받아와서
  메모리상의 데이터를 보관해두고 그다음의 두번째 B컴포넌트 에서 다시 usequery를 사용해서 동일한 todos 라는 키를 사용한다면 메모리상에 담겨있던(usequery로 인해 캐싱되어있던) 같은 데이터를 다시 주게되고 캐시된 같은 데이터를 쓰게 된다. 두개의 A,B컴포넌트가 동일한 usequery의 키를 사용함으로 딱 한번만 네트워크 통신이 발생하는걸 확인해볼수 있다.

✅ 4. 캐싱을 잘 사용하려면 고유한 키들을 잘 사용해야한다.

C 키를 요청하는것에 대해서는 동일한 네트워크를 사용해야하고,
D 키를 요청하는것에 대해서는 동일한 네트워크를 사용해야한다. (여기서에 C와 D키의 데이터는 다른데이터 !)

-> 🚨 키들을 잘 명시하고 분리해두는것이 중요 !!

• 키는 키들만의 조합으로 만들어 나갈 수 있기 때문에 배열로 설정 할 수 있다.
• 아래에서 더 자세히 ❗

// A list of todos
useQuery(['todos'], ...)
// Something else, whatever ! //배열형태 //원하는 조건으로 쓸수 있음
useQuery(['something','special'], ...)
//A list of todos that are "done"
useQuery(['todos',{type:'done'}], ...) 

👆🏻 위에 예시를 보면 type이 'done' 인지 type이 'active' 인지 에 따라서 type별로 다른 캐쉬를 사용할 수 있다.

📝 만약 checked 된것인 지 안된것인지 알 수 있도록 하고 싶다면

const [checked , setChecked ] = useState(false);
const{
	isLoading,
  error,
  data: todos,
} = useQuery(['todos', checked], ...)

의 형식으로 써줌으로써 키에 체크가 되었는지 안되었는지 세부적인 키를 추가 해줄 수 있다.

하지만 다른 윈도우로 갔다가 다시 해당 페이지에 들어갔을때 fetching...이라는 console 횟수가 증가하면서 네트워크 통신이 발생하는걸 알 수 있다...❗

그래서 Devtools 를 설치해 사용해보자 - !
글이 너무 길어져서 다음 시리즈로 😪