๐Ÿ’ซ react-query ๋„์ž…๊ธฐ

์˜ํ›ˆยท2024๋…„ 10์›” 6์ผ
0

๋ฌธ์ œ

ํ˜„์žฌ ํ”„๋กœ์ ํŠธ์—์„œ ์ง์ ‘ fetch๋ฅผ ํ†ตํ•ด ํ†ต์‹ ํ•˜๋ฉด์„œ ๋ฐ์ดํ„ฐ๋ฅผ ์ฒ˜๋ฆฌํ•˜๊ณ  ์žˆ๋‹ค.

ํ•˜์ง€๋งŒ ์ด ๋ฐฉ์‹์˜ ๊ฒฝ์šฐ ๋‹ค์ˆ˜ ๋ฐ˜๋ณต๋˜๋Š” ์š”์ฒญ๊ณผ ์ตœ์‹  ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์˜ค์ง€ ๋ชปํ•˜๊ณ , ๋ฐ›์•„์˜ค๋ ค๋ฉด ์ตœ์‹  ํŽ˜์ด์ง€๋กœ ์ƒˆ๋กœ๊ณ ์นจ ๋˜๋Š” ๋“ฑ์˜ ๋ฌธ์ œ๋“ค์ด ๋ฐœ์ƒํ•˜๊ณ  ์žˆ๋‹ค.


์ž‘์„ฑ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด ์ตœ์‹ ์œผ๋กœ ๋ฐ”๋กœ ๋˜์ง€ ์•Š๋Š” ๋ฌธ์ œ๊ฐ€ ์žˆ์—ˆ๋‹ค. ๋‚™๊ด€์  ์—…๋ฐ์ดํŠธ, useEffect๋ฅผ ์ด์šฉํ•œ ์ˆ˜๋™๊ฐฑ์‹ ์„ ํ•ด๋ณผ๊นŒ ํ•˜๋‹ค๊ฐ€ ์ฐจ๋ผ๋ฆฌ react-query๋ฅผ ๋„์ž…ํ•ด๋ณด๋ฉด ์–ด๋–จ๊นŒ ๊ณ ๋ฏผํ•ด๋ณด๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

์ด๊ธ€์—์„œ๋Š” react-query๋ฅผ ๋„์ž…ํ•ด๋ณด๊ธฐ ์œ„ํ•ด react-query๊ฐ€ ๋ฌด์—‡์ธ์ง€, ๋˜ ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉํ•˜๋Š”์ง€ ์ •๋ฆฌํ•ด๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

React-query ๋ž€?

๋ฆฌ์•กํŠธ ์ฟผ๋ฆฌ๋Š” ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ์„œ๋ฒ„ ์ƒํƒœ๋ฅผ ๋ถˆ๋Ÿฌ์˜ค๊ณ , ์บ์‹ฑํ•˜๋ฉฐ, ์ง€์†์ ์œผ๋กœ ๋™๊ธฐํ™”ํ•˜๊ณ  ์—…๋ฐ์ดํŠธ ํ•˜๋Š” ์ž‘์—…์„ ๋„์™€์ฃผ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค. ๋ฆฌ์•กํŠธ ์ฟผ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์„œ๋ฒ„ ์ƒํƒœ์™€ ํด๋ผ์ด์–ธํŠธ ์ƒํƒœ๋ฅผ ๋ถ„๋ฆฌํ•˜์—ฌ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ์–ด React ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์„ฑ๋Šฅ, ํ™•์žฅ์„ฑ, ์œ ์ง€ ๋ณด์ˆ˜์„ฑ์„ ํ–ฅ์ƒ์‹œํ‚ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋”๋ถˆ์–ด ์„œ๋ฒ„ ์ƒํƒœ๋ฅผ ๊ด€๋ฆฌํ•˜๋ฉฐ ๋งˆ์ฃผํ•˜๋Š” ๋‹ค์–‘ํ•œ ๋ฌธ์ œ๋“ค์„ ํšจ๊ณผ์ ์œผ๋กœ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์žฅ์ ์€ ๋ฐ์ดํ„ฐ ์บ์‹ฑ ๋ฐ ์ตœ์ ํ™”, ์ž๋™ ์žฌ์š”์ฒญ ๋ฐ ์‹ค์‹œ๊ฐ„ ์—…๋ฐ์ดํŠธ, ์—๋Ÿฌ ์ฒ˜๋ฆฌ ๋ฐ ์žฌ์‹œ๋„, ์ค‘๋ณต ์š”์ฒญ ๋ฐฉ์ง€, ํ™•์žฅ์„ฑ๊ณผ ์œ ์—ฐ์„ฑ ๋“ฑ์ด ์žˆ๊ฒ ์Šต๋‹ˆ๋‹ค.

์ž์„ธํ•œ ๊ฒƒ๋“ค์€ ๊ณต์‹ ํŽ˜์ด์ง€์—์„œ ํ™•์ธํ•ด์ฃผ์‹œ๊ธฐ ๋ฐ”๋ž๋‹ˆ๋‘ฅ@!

QueryClientProvider ์„ค์ •

layout.js

profile
Web Frontend Engineer ๐Ÿ‘ท

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