๐ย Reference
๐ย Chapter
โฃ
ํํฐ ์กฐํฉ๋ง๋ค ๋ค๋ฅธ queryKey๋ฅผ ์จ์, ๊ฒฐ๊ณผ๋ฅผ ๋ฐ๋ก ์บ์ํ๋ค๋ ๋ป์ด๋ค.
UX๊ฐ ๊ฐ์ ๋๋ ์ด์
๊ตฌํ ์์
ํํฐ ์ํ๋ฅผ ๋ณ๋๋ก ๊ด๋ฆฌ (์: Zustand, useState, URL query param)
const filters = {
category: 'skincare',
sort: 'popular',
minPrice: 10000,
maxPrice: 30000,
};
queryKey์ ํํฐ๋ฅผ ํฌํจ
const query = useQuery({
queryKey: ['products', filters],
queryFn: () => getProducts(filters),
staleTime: 1000 * 30,
});
ํํฐ ๋ฐ๋๋ฉด queryKey๋ ๋ฐ๋
์์ 1
์ด ์กฐํฉ์ผ๋ก ์กฐํํ ๊ฒฐ๊ณผ์,
์ด ๊ฒฐ๊ณผ๋ ์์ ํ ๋ค๋ฅธ ๋ฐ์ดํฐ์ด๋ค. ๊ทธ๋์ ์บ์๋ ๋ฐ๋ก ๊ฐ์ ธ๊ฐ์ผ ํ๋ค.
์ ์ข์ ์์
useQuery({
queryKey: ['products'],
queryFn: fetchProducts,
})
์ข์ ์์
useQuery({
queryKey: ['products', filters],
queryFn: () => fetchProducts(filters),
})
๋๋ ๋ ๋ช ์์ ์ผ๋ก
useQuery({
queryKey: [
'products',
filters.category,
filters.sort,
filters.priceRange?.min,
filters.priceRange?.max,
],
queryFn: () => fetchProducts(filters),
})
์ด๋ ๊ฒ ํ๋ฉด
์ด ๊ฐ๊ฐ ๋ณ๋ ์บ์๊ฐ ๋๋ค.