$ npm i react-query
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>
</>
);
}
- console.log('fetching...') ๊ฒฐ๊ณผ fetching ์ด ํ๋ฒ๋ง ๋์ค๋๊ฑธ ํ์ธํด๋ณผ์ ์๋ค.
- ์๋ฅผ ๋ค์ด A์ ์ปดํฌ๋ํธ๊ฐ usequery๋ฅผ ์ฌ์ฉํ์๋ ๋คํธ์ํฌ ํต์ ์ ์์ฒญํด ๋คํธ์ํฌ์์ ๋ฐ์ดํฐ๋ฅผ ๋ฐ์์์
๋ฉ๋ชจ๋ฆฌ์์ ๋ฐ์ดํฐ๋ฅผ ๋ณด๊ดํด๋๊ณ ๊ทธ๋ค์์ ๋๋ฒ์งธ B์ปดํฌ๋ํธ ์์ ๋ค์ usequery๋ฅผ ์ฌ์ฉํด์ ๋์ผํ todos ๋ผ๋ ํค๋ฅผ ์ฌ์ฉํ๋ค๋ฉด ๋ฉ๋ชจ๋ฆฌ์์ ๋ด๊ฒจ์๋(usequery๋ก ์ธํด ์บ์ฑ๋์ด์๋) ๊ฐ์ ๋ฐ์ดํฐ๋ฅผ ๋ค์ ์ฃผ๊ฒ๋๊ณ ์บ์๋ ๊ฐ์ ๋ฐ์ดํฐ๋ฅผ ์ฐ๊ฒ ๋๋ค. ๋๊ฐ์ A,B์ปดํฌ๋ํธ๊ฐ ๋์ผํ usequery์ ํค๋ฅผ ์ฌ์ฉํจ์ผ๋ก ๋ฑ ํ๋ฒ๋ง ๋คํธ์ํฌ ํต์ ์ด ๋ฐ์ํ๋๊ฑธ ํ์ธํด๋ณผ์ ์๋ค.
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๋ณ๋ก ๋ค๋ฅธ ์บ์ฌ๋ฅผ ์ฌ์ฉํ ์ ์๋ค.
const [checked , setChecked ] = useState(false);
const{
isLoading,
error,
data: todos,
} = useQuery(['todos', checked], ...)
์ ํ์์ผ๋ก ์จ์ค์ผ๋ก์จ ํค์ ์ฒดํฌ๊ฐ ๋์๋์ง ์๋์๋์ง ์ธ๋ถ์ ์ธ ํค๋ฅผ ์ถ๊ฐ ํด์ค ์ ์๋ค.
ํ์ง๋ง ๋ค๋ฅธ ์๋์ฐ๋ก ๊ฐ๋ค๊ฐ ๋ค์ ํด๋น ํ์ด์ง์ ๋ค์ด๊ฐ์๋ fetching...์ด๋ผ๋ console ํ์๊ฐ ์ฆ๊ฐํ๋ฉด์ ๋คํธ์ํฌ ํต์ ์ด ๋ฐ์ํ๋๊ฑธ ์ ์ ์๋ค...โ
๊ทธ๋์ Devtools ๋ฅผ ์ค์นํด ์ฌ์ฉํด๋ณด์ - !
๊ธ์ด ๋๋ฌด ๊ธธ์ด์ ธ์ ๋ค์ ์๋ฆฌ์ฆ๋ก ๐ช