[ React ] usequery - 1

์Šฌ๋กœ๊ทธยท2023๋…„ 3์›” 6์ผ
0

React

๋ชฉ๋ก ๋ณด๊ธฐ
5/12
post-thumbnail

๐Ÿ“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 ๋ฅผ ์„ค์น˜ํ•ด ์‚ฌ์šฉํ•ด๋ณด์ž - !
๊ธ€์ด ๋„ˆ๋ฌด ๊ธธ์–ด์ ธ์„œ ๋‹ค์Œ ์‹œ๋ฆฌ์ฆˆ๋กœ ๐Ÿ˜ช

profile
๋นจ๋ฆฌ๊ฐ€๋Š” ์œ ์ผํ•œ ๋ฐฉ๋ฒ•์€ ์ œ๋Œ€๋กœ ๊ฐ€๋Š”๊ฒƒ

0๊ฐœ์˜ ๋Œ“๊ธ€