Search
Duplicate

React Query์™€ ์ƒํƒœ๊ด€๋ฆฌ :: 2์›” ์šฐ์•„ํ•œํ…Œํฌ์„ธ๋ฏธ๋‚˜

subject
react query
url
date
2022/02/22
1 more property
1์›”์— ์ด์–ด ํšŒ์‚ฌ ๋ถ„๋“ค์ด๋ž‘ ๊ฐ™์ด ๋“ค์—ˆ๋‹ค. 1๋ถ€๋Š” ๊ธฐ์ดˆ ๋‚ด์šฉ์ด์—ˆ๊ณ  2๋ถ€๋Š” ์›๋ฆฌ๋„ ์กฐ๊ธˆ ์„ค๋ช…ํ•ด์ฃผ์…จ๋‹ค. 1์›”๋ณด๋‹ค ๊ธฐ๋Œ€๋ฅผ ๋œ ํ•˜๊ณ  ๋“ค์—ˆ๋Š”๋ฐ ๋” ์žฌ๋ฐŒ์—ˆ๋˜ ๋“ฏ!

1๋ถ€

โ€ข
ํ”„๋ก ํŠธ์—”๋“œ์—์„œ ์ƒํƒœ๊ด€๋ฆฌ๋ž€?
โ€ข
์ด ํ™”๋ฉด๋“ค์„ ๋ชจ๋‘ ๋‹ค๋ฅธ ๋ ˆํฌ์ง€ํ† ๋ฆฌ์—์„œ 3๋ช…์ด์„œ ๊ด€๋ฆฌํ–ˆ์—ˆ์Œ
โ€ข
react-saga ๋“ฑ์ด ํ˜„์žฌ์—๋„ ์ ์ • ๊ธฐ์ˆ ์ธ๊ฐ€?
โ€ข
์–ด๋–ค ์ƒํƒœ๋ฅผ ๊ด€๋ฆฌํ•˜๊ธฐ ์œ„ํ•ด์„œ
โ€ข
์–ด๋–ค ์ ์ • ๊ธฐ์ˆ ์„ ์‚ฌ์šฉํ•ด์•ผ ํ•˜๋Š”์ง€
โ€ข
string ํ˜•ํƒœ๋„ ๋‚ด๋ถ€์—์„œ๋Š” ๊ฒฐ๊ตญ ๋ฐฐ์—ด์œผ๋กœ ๋ฐ”๋€Œ์–ด์š”
โ€ข
enabled
โ€ข
๋ฐœํ‘œ์ž ๋‹ต๋ณ€: 1๋ฒˆ์„ ์“ฐ๊ณ  1๋ฒˆ์ด ๋ถˆ๊ฐ€๋Šฅํ•˜๋ฉด 2๋ฒˆ์„ ์“ธ ๊ฒƒ์ด๋‹ค
โ€ข
๋ฐœํ‘œ์ž ๋‹ต๋ณ€: option.onSuccess์—์„œ ์ฒ˜๋ฆฌ

2๋ถ€

โ€ข
์ฃผ๋ฌธ ๋ฐ์ดํ„ฐ โ†’ ๋ฐ์ดํ„ฐ์˜ ์ตœ์‹ ์„ฑ์ด ์ค‘์š”ํ•ด์„œ ๋งŽ์ด ์‚ฌ์šฉํ•˜์ง€ ์•Š์Œ
โ€ข
์ค‘๋ณต ์ƒํƒœ๋Š” ์–ด๋–ป๊ฒŒ..? API
โ€ข
QueryProvide๊ฐ€ ํ•„์š”ํ•œ ์ด์œ 
โ€ข
storage ์ ‘๊ทผ: experimental๋กœ persist ๊ธฐ๋Šฅ ์ œ๊ณต
โ€ข
best practice ๋ฆฌ์„œ์น˜์ค‘..

Q&A

โ€ข
์ƒ์‚ฐ์„ฑ, ์œ ์ง€๋ณด์ˆ˜, ๊ธฐ์ˆ ์Šคํƒ ์ธก๋ฉด
โ€ข
๋ ˆ๊ฑฐ์‹œ: ์šฐ์•„ํ•œ JS โ†’ ์œ ์ง€๋ณด์ˆ˜๊ฐ€ ๋๋‚œ ํ”„๋ ˆ์ž„์›Œํฌ
โ€ข
๋น„์Šทํ•œ ์—ญํ• .
โ€ข
react-query๊ฐ€ ๋” ๋งŽ์€ ๊ธฐ๋Šฅ๊ณผ ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ์ œ๊ณตํ•˜๋Š” ๊ฑธ๋กœ ์•Œ๊ณ  ์žˆ๋‹ค
โ€ข
๋น„๊ต ํŽ˜์ด์ง€ ๋ณด๋ฉด ๋‚˜์™€์žˆ์Œ
โ€ข
ใ…‡ใ…‡.. isLoading ํ•ฉ์น˜๋Š” ํŽธ. isLoading ๊ด€๋ฆฌํ•˜๋Š” ๋ณ€์ˆ˜ ๋‘๊ณ  ์‚ฌ์šฉ
โ€ข
๋จผ์ € ๋ณด์—ฌ์ค„ ์• ๋“ค์€ ๋จผ์ € ๋ณด์—ฌ์ฃผ๊ธฐ๋„ ํ•จ โ†’ ์ƒํ™ฉ์— ๋”ฐ๋ผ ๋‹ค๋ฅด๊ฒŒ ์ฒ˜๋ฆฌ
โ€ข
mobX ์‚ฌ์šฉ์ค‘.
โ€ข
๋ฆฌ๋•์Šค ๋„ˆ๋ฌด ๊ธธ์–ด์„œ ๊ฐ„๋žตํ•˜๊ณ  ๋„๋ฉ”์ธ ๋‹จ์œ„๋กœ ๋ฌถ์ด๋Š” mobX ์‚ฌ์šฉ
โ€ข
๋„๋ฉ”์ธ ๋ณ„๋กœ ๋ชจ์œผ๋‹ˆ ์ค‘๋ณต๋˜์ง€ ์•Š์Œ
โ€ข
ํ•จ์ˆ˜๋ช…? ์ž์ฒด๋ฅผ ์ฟผ๋ฆฌํ‚ค๋กœ ์‚ฌ์šฉ.
โ€ข
enum ์œผ๋กœ ๊ด€๋ฆฌํ•˜์ž๋Š” ์ œ์•ˆ๋„ ํ–ˆ์Œ
โ€ข
ํŒ€์ด ๋งŽ์•„์„œ ๋‹ค ๋‹ค๋ฅด๋‹ค
โ€ข
ํฌ๊ฒŒ ์‹ ๊ฒฝ์“ฐ์ง€ ์•Š๋Š”๋‹ค
โ€ข
API ๋ณ„๋กœ ์ปค์Šคํ…€ํ•  ์ผ์ด ๋งŽ์•„ ๊ฐ๊ฐ ์˜ต์…˜ ๋”ฐ๋กœ ๋„ฃ์–ด์„œ ์‚ฌ์šฉ
โ€ข
์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋น„๋Œ€ํ•ด์ง€๋Š” ๋ฌธ์ œ์ 
โ€ข
onSuccess ์‹œ ์ฒซ ๋ฒˆ์งธ ์„ฑ๊ณต์ธ ๊ฒฝ์šฐ์—๋งŒ ๋ญ”๊ฐ€ ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ฃผ๋Š” ๊ธฐ๋Šฅ์ด ์ถ”๊ฐ€๋˜๋ฉด ์ข‹๊ฒ ๋‹ค
โ€ข
๊ณต๋ถ€ํ•˜๋Š” ์ž…์žฅ์—์„œ ๋‘˜ ๋‹ค..
โ€ข
์‚ฌ๊ฐ€ ๊ณต๋ถ€ํ•˜๊ณ  ๋ถˆํŽธํ•œ ์ ๋„ ๋Š๊ปด๋ณด๊ณ  ์ฟผ๋ฆฌ๋กœ ๋„˜์–ด์™€๋ผ
โ€ข
โ€˜๋Œ€์ฒด ๊ฐ€๋Šฅํ•˜๋‹คโ€™ ๋ผ๊ณ  ํ•˜๊ธด ์–ด๋ ต์ง€๋งŒ.. api ๊ด€๋ จ๋œ ์ „์—ญ ์ƒํƒœ๋ฅผ ๋Œ€์ฒด.
โ€ข
๋ฐ์ดํ„ฐ ์„ฑ๊ฒฉ์— ๋”ฐ๋ผ ๋‹ค๋ฅผ ๊ฒƒ ๊ฐ™๋‹ค
โ€ข
์ฟผ๋ฆฌ ์บ์‹œ์— ์žˆ๋Š” ์ž์ฒด๋กœ ์“ฐ๊ฑฐ๋‚˜, ๋กœ์ปฌ ์Šคํ† ๋ฆฌ์ง€์— ๋„ฃ์–ด์„œ ์“ฐ๊ฑฐ๋‚˜, ํด๋ผ์ด์–ธํŠธ state .. ๋“ฑ๋“ฑ
โ€ข
๋ฐ์ดํ„ฐ ๊ฐ€๊ณตํ•˜๋Š” ํ•จ์ˆ˜๋ฅผ ๋งŒ๋“ค ๊ฒƒ ๊ฐ™๋‹ค??
โ€ข
์—๋Ÿฌ ๋ฐ”์šด๋”๋ฆฌ๋Š” ์“ฐ์ง€๋งŒ suspense๋กœ ํ˜ธ์ถœํ•˜์ง€๋Š” ์•Š๋Š”๋‹ค
โ€ข
suspense ์•ˆ ์“ฐ๋Š” ์ด์œ ๋Š” experimental ๋‹จ๊ณ„๋ผ์„œ.
โ€ข
์„ž์–ด ์“ฐ๋ฉด ํŽธํ•˜๋‹ค. ๋‚˜๋Š” experimental์ด๋ผ์„œ ์•ˆ์“ฐ์ง€๋งŒ.
โ€ข
๋„๋ฉ”์ธ: ๋ฐฐ๋„ˆ, ์˜ค๋” ๋“ฑ๋“ฑ.. ์ด ์žˆ๊ณ , ์ฝ”์–ด ๋ผ๋Š” ๋„๋ฉ”์ธ์„ ๋”ฐ๋กœ ๋นผ๊ฑฐ๋‚˜ ํ•  ๊ฒƒ ๊ฐ™๋‹ค
โ€ข
๋ฐฑ์—”๋“œ ๋„๋ฉ”์ธ์„ ๋”ฐ๋ผ๊ฐˆ ์ˆ˜๋„ ์žˆ์„ ๊ฒƒ ๊ฐ™๋‹ค
โ€ข
๋ฎคํ…Œ์ด์…˜๋„ ๋งˆ์ฐฌ๊ฐ€์ง€
โ€ข
๋ณ„๊ฐœ๋กœ ์‚ฌ์šฉ. ์ปดํฌ๋„ŒํŠธ์—์„œ ํ•„์š”ํ•œ ๊ฐ’๋“ค์ด ํ•ฉ์ณ์ง„๋‹ค
โ€ข
๊ฐ“์žฌํ›„ ui ๊ด€๋ จ?? ๊ณตํ†ต ์Šคํ…Œ์ดํŠธ๋“ค
โ€ข
์žฌํ›„๋‹˜ ์ด๋ฆ„ ์บก์ณํ•˜๋‹ค ๋ชป๋“ค์Œ
โ€ข
์ด๊ฑธ ์™œ ๋ฌผ์–ด๋ด!
โ€ข
์•„ํ‚คํ…์ณ ํ†ตํ•ฉ๊ณผ ์—ฎ์–ด์„œ ์ง„ํ–‰. ํ”„๋กœ๋•ํŠธ๋ณ„๋กœ ํ•˜๋‚˜์”ฉ ์˜ฎ๊น€. ์ฃผ๋ฌธ ๋‚ด์—ญ โ†’ ์ฃผ๋ฌธ ์ดํ›„ โ†’ ๋“ฑ๋“ฑ..
โ€ข
ํ”„๋กœ๋•ํŠธ๊ฐ€ ์ž‘๋‹ค๋ฉด ํ•œ ๋ฒˆ์— ํ•ด๋„ ๋  ๊ฒƒ ๊ฐ™๊ณ .. ํ”„๋ฐ”ํ”„
โ€ข
์ฟผ๋ฆฌ๋Š” ์ŠคํŠธ๋ง ๋ง๊ณ  ๋ฐฐ์—ด๋กœ๋„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Œ. ํŽ˜์ด์ง€ ์ˆซ์ž๋ฅผ ์ฟผ๋ฆฌ์— ๋„ฃ์œผ๋ฉด ๋จ
โ€ข
๊ฒ€์ƒ‰์กฐ๊ฑด์„ state๋กœ ๊ด€๋ฆฌํ•˜๋ฉด refetch ์ž˜ ๋˜๋”๋ผ๊ณ ์š”.
โ€ข
enabled: false ์ฃผ๋ฉด ๋ฉ๋‹ˆ๋‹ค~
โ€ข
fetch ๋ฅผ ์ธ์œ„์ ์œผ๋กœ ํ˜ธ์ถœํ•˜๋ฉด ์‹คํ–‰์€ ๋˜๋‹ˆ ์ฐธ๊ณ ~
โ€ข
๋ทฐ ์ปดํฌ๋„ŒํŠธ๋Š” ๋ถ„๋ฆฌํ•˜๋Š” ํŽธ.
โ—ฆ
ui test ํŽธํ•˜๊ณ 
โ—ฆ
๋กœ์ง๊ณผ ๋ถ„๋ฆฌํ•˜๊ธฐ ์œ„ํ•ด์„œ
โ€ข
ํ™”๋ฉด์— ๋ณด์ด๋Š” ์ด์ƒ ์บ์‹œ์— ์žˆ๋Š” ๊ฒƒ.
โ€ข
staleTime์ด cacheTime๋ณด๋‹ค ๊ธด ๊ฑฐ๋Š” ์„ค์ •์„ ์ž˜๋ชป ํ•œ ๊ฒƒ..
โ€ข
์ฝ”๋“œ๊ฐ€ ๋” ์งง์•„์กŒ๊ณ  ๊ด€๋ฆฌํ•˜๊ธฐ ํŽธํ•ด์กŒ๋‹ค
โ€ข
client state, server state ์ž˜ ๋ถ„๋ฆฌํ•ด์„œ ๊ด€๋ฆฌํ•ด์•ผ ๋ณต์žก๋„๋ฅผ ๋‚ฎ์ถœ ์ˆ˜ ์žˆ๋‹ค
โ€ข
๋จผ ๋ฏธ๋ž˜์˜ ์ผ
โ€ข
๋ถ€๋„๋Ÿฝ์ง€๋งŒ ์ปค๋ฒ„๋ฆฌ์ง€๊ฐ€ ๋†’์ง€๋Š” ์•Š๋‹ค