[๐Ÿถ ์‚ฌ์ด๋“œ ํ”„๋กœ์ ํŠธ] Tanstack Query - getQueryData ํ™œ์šฉํ•˜๊ธฐ

JEยท2024๋…„ 10์›” 11์ผ
0

์‹œ์ž‘

ํ˜„์žฌ ์ง„ํ–‰ ์ค‘์ธ ์‚ฌ์ด๋“œ ํ”„๋กœ์ ํŠธ๋Š” ๊ฐ•์•„์ง€ ์œ ์น˜์› ์„œ๋น„์Šค๋‹ค.

๋‚ด๊ฐ€ ๋งก์€ ํŒŒํŠธ๋Š” ๊ฒฌ์ฃผ ๋งˆ์ดํŽ˜์ด์ง€์ด๋ฉฐ ํ˜„์žฌ ์ž‘์—…์€ ๊ฐ•์•„์ง€ ์‚ญ์ œ ๊ธฐ๋Šฅ์ด๋‹ค.

ํ˜„์žฌ dogId๋กœ ๊ด€๋ฆฌ๋˜๋ฉฐ dogId๋ฅผ ํ†ตํ•ด ๊ฐ•์•„์ง€๋ฅผ ์‚ญ์ œ ๋ฐ ํ™œ์„ฑํ™”ํ•  ์ˆ˜ ์žˆ๋‹ค.

๊ฐ•์•„์ง€ ํด๋ฆญ ์‹œ ํ•ด๋‹น ๊ฐ•์•„์ง€์˜ dogId๋ฅผ ์ €์žฅํ•˜๊ฒŒ ๋œ๋‹ค.
dog๊ฐ€ ์‚ญ์ œ ๋˜๋ฉด dogId๋ฅผ doglist ์ฒซ๋ฒˆ์งธ dogId๋กœ ๋ณ€๊ฒฝํ•ด ์ฃผ๋ ค๊ณ  ํ•œ๋‹ค.

๋‹ค๋งŒ doglist๋Š” ์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ์—์„œ ํ˜ธ์ถœ๋˜๋Š” ๋ฐ์ดํ„ฐ๊ณ  ์ด๋ฅผ props๋กœ ๋‚ด๋ ค ์ฃผ๊ฑฐ๋‚˜ recoil๋กœ ๊ด€๋ฆฌํ•˜๊ธฐ์— ๋ถˆํ•„์š”ํ•œ ์ž‘์—…์ด ๋งŽ์•„์ง€๊ฒŒ ๋˜์–ด ๊ณ ๋ฏผํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค.

Tanstack Query๋ฅผ ์‚ฌ์šฉํ•ด ์„œ๋ฒ„ ์ƒํƒœ๋ฅผ ๊ด€๋ฆฌํ•˜๊ณ  ์žˆ์–ด ์ด๋ถ€๋ถ„์„ ํ™œ์šฉํ•˜๊ณ  ์‹ถ์—ˆ๋‹ค.
Tanstack Query์˜ ๊ฐ€์žฅ ํฐ ์žฅ์  ์ค‘ ํ•˜๋‚˜๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ์บ์‹ฑ ํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ์ ์ด์ง€ ์•Š์„๊นŒ ์‹ถ๋‹ค.


์—ฌ๋Ÿฌ๊ฐ€์ง€ ๋ฐฉ๋ฒ•

1. ์ผ์ฐจ์›์ ์ธ ๋ฐฉ์‹์€ api ํ˜ธ์ถœ

๋‹ค๋งŒ ์ด ๋ฐฉ๋ฒ•์€ ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ์— ๊ตณ์ด ํ˜ธ์ถœํ•  ํ•„์š”๊ฐ€ ์—†์„ ์ˆ˜๋„ ์žˆ๊ณ , ์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ์—์„œ ์ด๋ฏธ ํ˜ธ์ถœํ•˜๊ณ  ์žˆ๋‹ค๋ฉด ์ค‘๋ณต ํ˜ธ์ถœํ•˜๋Š” ์…ˆ์ด๋‹ค.

2. props๋กœ ์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ์˜ ๋ฐ์ดํ„ฐ๋ฅผ ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ์— ์ „๋‹ฌ

์ตœ์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ์—์„œ ํ˜ธ์ถœํ•˜๊ณ  ์žˆ๋Š” ๋ฐ์ดํ„ฐ ์˜€๊ณ ,
๋‚ด๊ฐ€ ์ž‘์—…ํ•ด์•ผํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ๋Š” ๋‘ ๋ฒˆ์งธ ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ๋กœ ํ•˜๋‚˜์˜ ๊ธฐ๋Šฅ ์ž‘์—…์— ํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ๋ฅผ ์œ„ํ•ด props๋กœ ๊ด€๋ฆฌํ•˜๋Š”๊ฒŒ ๋งž์„๊นŒ ์‹ถ์—ˆ๋‹ค.

3. recoil์„ ์‚ฌ์šฉํ•ด ๋ณด๋Š”๊ฑด ์–ด๋–จ๊นŒ

recoil์€ ํ”„๋ก ํŠธ์—์„œ ์ƒํƒœ๋ฅผ ๊ด€๋ฆฌํ•˜๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ ์„œ๋ฒ„ ์ƒํƒœ๋ฅผ ๊ด€๋ฆฌํ•˜๊ธฐ์—” ์ ํ•ฉํ•˜์ง€ ์•Š์•˜๋‹ค.
๋ฆฌ๋กœ๋“œํ•  ๊ฒฝ์šฐ ๋ฐ์ดํ„ฐ๊ฐ€ ์ดˆ๊ธฐํ™” ๋˜๊ธฐ ๋•Œ๋ฌธ์— ๋ฐ์ดํ„ฐ๋ฅผ ์œ ์ง€ํ•˜๋Š”๋ฐ ํ•œ๊ณ„๊ฐ€ ์žˆ๋‹ค.

getQueryData๋ฅผ ํ™œ์šฉํ•˜์ž

4. Tanstack Query์˜ ์บ์‹ฑ ๊ธฐ๋Šฅ

Tanstack Query์˜ getQueryData ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ–ˆ๋‹ค.
์ธ์ˆ˜๋Š” query key๋ฅผ ๋ฐ›๋Š”๋‹ค.

ํ•ด๋‹น query key๋Š” ๊ฐ๊ฐ์˜ ์ƒํƒœ ๋ฐ์ดํ„ฐ๋“ค์ด ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ๊ณ ์œ ํ•œ key ๊ฐ’์œผ๋กœ ์ด๋ฅผ ์ธ์ˆ˜๋กœ ์ „๋‹ฌํ•  ๊ฒฝ์šฐ ํ•ด๋‹น key๋กœ ์„ ์–ธ๋œ ์บ์‹œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ๋‹ค.

์ฆ‰, ์บ์‹œ๋œ ๋ฐ์ดํ„ฐ๋ผ์„œ ์ตœ์‹ ํ™”๊ฐ€ ์•ˆ ๋˜์–ด ์žˆ์ง€๋งŒ, api ํ˜ธ์ถœ ์—†์ด๋„ ๋‚ด๊ฐ€ ์›ํ•˜๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ”๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.
(api ์žฌ ํ˜ธ์ถœ ํ•  ๊ฒฝ์šฐ ์บ์‹œ๋œ ๋ฐ์ดํ„ฐ๋„ ์ตœ์‹ ํ™” ๋œ๋‹ค.)

๋งŒ์•ฝ ์บ์‹ฑ๋œ doglist ๋ฐ์ดํ„ฐ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด ์•„๋ž˜์ฒ˜๋Ÿผ ์ž‘์„ฑํ•˜๋ฉด ๋œ๋‹ค.

const queryClient = useQueryClient();
const cacheMemberData = queryClient.getQueryData(["memberInfo"]) as IMemberInfo;
const { doglist } = cacheMemberData;

getQueryData ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” useQueryClient๋ฅผ ๋จผ์ € ์„ ์–ธํ•ด์•ผํ•œ๋‹ค.

๋˜ํ•œ, getQueryData ๋ฉ”์„œ๋“œ๋Š” ์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ(์ด์ „ ํ˜ธ์ถœ)์— ์˜ํ–ฅ์„ ๋ฐ›๋Š”๋‹ค.
๋งŒ์•ฝ ๋‹ค๋ฅธ ๊ณณ์—์„œ "memberInfo" ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ์„œ๋ฒ„ ๋ฐ์ดํ„ฐ๋ฅผ ํ˜ธ์ถœํ•œ ๊ฒฝ์šฐ
data๋ฅผ ๋ฐ˜ํ™˜ํ•˜๊ณ  ๊ทธ๋ ‡์ง€ ์•Š์„ ๊ฒฝ์šฐ undefined๋ฅผ ๋ฐ˜ํ™˜ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ด์ ์„ ์œ ์˜ํ•ด์•ผ ํ•œ๋‹ค.


๋งˆ์น˜๋ฉฐ

getQueryData ๋ฉ”์„œ๋“œ๋ฅผ ํ†ตํ•ด ๋‹ค๋ฅธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋˜๋Š” api ํ˜ธ์ถœ์„ ๋‹ค์‹œ ํ•˜์ง€ ์•Š์•„๋„ ๋‹ค๋ฅธ ๊ณณ์—์„œ ํ•œ ๋ฒˆ์ด๋ผ๋„ ํ˜ธ์ถœํ•˜๊ฒŒ ๋˜๋ฉด
์ž์‹ ์ปดํฌ๋„ŒํŠธ์—์„œ ์บ์‹œ๋œ ์„œ๋ฒ„ ๋ฐ์ดํ„ฐ๋ฅผ ์‚ฌ์šฉ ํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ํŠน์ง•์„ ๊ฐ€์ง€๊ณ  ์žˆ์–ด ์œ ์šฉํ•˜๋‹ค ์ƒ๊ฐํ•œ๋‹ค.

๋ถˆํ•„์š”ํ•œ ์ž‘์—…์„ Tanstack Query ๋ฉ”์„œ๋“œ๋ฅผ ํ™œ์šฉํ•ด ๊ฐ€๋…์„ฑ๊ณผ ๊ด€๋ฆฌ๋ฅผ ํŽธ๋ฆฌํ•˜๊ฒŒ ํ•  ์ˆ˜ ์žˆ์—ˆ๋˜ ๊ฒƒ ๊ฐ™๋‹ค.

Tanstack Query์—๋Š” ๋‹ค์–‘ํ•œ ๋ฉ”์„œ๋“œ๊ฐ€ ์กด์žฌํ•˜๊ธฐ์— ํ•˜๋‚˜ ์”ฉ ํ•™์Šต ํ•˜๋Š” ๊ฐœ๋…์œผ๋กœ ๊ณต๋ถ€ํ•ด์•ผ๊ฒ ๋‹ค.

profile
[ํ”„๋ก ํŠธ ์• ์†ก์ด] ์ž‘์€ ๊นจ๋‹ฌ์Œ๋„ ๊ธฐ๋กํ•˜๊ธฐ

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