[React-Query] React Query Filter

Hyukยท2023๋…„ 3์›” 3์ผ

reactQuery

๋ชฉ๋ก ๋ณด๊ธฐ
3/6

๐Ÿ“ React Query Filter

๐Ÿšซ ๋ฌธ์ œ - ๋ฐ์ดํ„ฐ๋ฅผ filtering ํ•ด๋ณด์ž

๐Ÿ‘‰ code๋Š” open sandBox๋ฅผ ํ™•์ธํ•˜๋ฉด ๋ณผ์ˆ˜์žˆ์Šต๋‹ˆ๋‹ค.

๐Ÿ’ก ๋ฌธ์ œํ•ด๊ฒฐ

Filtering์„ ํ†ตํ•ด์„œ query๋ฅผ ํ†ตํ•ด ๊ฐ€์ ธ์˜จ ๋ฐ์ดํ„ฐ๋ฅผ ํ•œ๋ฒˆ๋” filtering ์ฒ˜๋ฆฌํ• ์ˆ˜ ์žˆ์—ˆ๋‹ค.
ํ•ต์‹ฌ์€ useQuery์˜ ๋‚ด์žฅํ•จ์ˆ˜์ธ select๋ฅผ ์ด์šฉํ•˜์—ฌ ํ•จ์ˆ˜๋กœ ํ•œ๋ฒˆ ๊ฑธ๋Ÿฌ์ฃผ๋ฉด ๋˜๋Š”๊ฒƒ์ด๋‹ค.

๐Ÿง ๋А๋‚€์ 

query์˜ ๊ธฐ๋Šฅ ๋ณด๋‹ค๋Š” react-Query์— ๋Œ€ํ•œ ์ดํ•ด๋„์™€ hooks ์‚ฌ์šฉ๋ฒ•์— ๋Œ€ํ•ด์„œ ์ตํžˆ๋Š” ์‹œ๊ฐ„์ด์—ˆ๋‹ค.
๋ฌผ๋ก  ํ˜„์žฌ ํŽ˜์ด์ง€์—์„œ๋งŒ ๋ฐ์ดํ„ฐ๋ฅผ search ํ•˜๊ณ ์žˆ์ง€๋งŒ ์ „์ฒด ๋ฐ์ดํ„ฐ์— ๋Œ€ํ•ด์„œ 
search ๋˜ํ•œ ๊ฐ™์€ ๋งฅ๋ฝ์ด๋ผ ์ƒ๊ฐ์ด ๋“ค์—ˆ๋‹ค.
๋‚ด๊ฐ€ ์ƒ๊ฐํ•œ ๋ฐฉ๋ฒ•์€ ์„œ๋ฒ„๋ฐ์ดํ„ฐ๋ฅผ ์ด์šฉํ•˜๊ฑฐ๋‚˜, ๋ชจ๋“  ๋ฐ์ดํ„ฐ์— ๋Œ€ํ•ด์„œ filtering์„
์ง„ํ–‰ํ•ด์ฃผ๋ฉด ๋˜๊ธฐ์— ๊ทธ๋ถ€๋ถ„์€
๋„˜์–ด๊ฐ€๊ณ  ๊ธฐ๋ณธ์ ์ธ hooks์™€ filter๊ธฐ๋Šฅ์— ๋Œ€ํ•ด์„œ ์ดํ•ด๋ฅผ ํ• ์ˆ˜์žˆ์—ˆ๋‹ค.
profile
frontEnd Developer

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