ํ์ฌ ์งํ ์ค์ธ ์ฌ์ด๋ ํ๋ก์ ํธ๋ ๊ฐ์์ง ์ ์น์ ์๋น์ค๋ค.
๋ด๊ฐ ๋งก์ ํํธ๋ ๊ฒฌ์ฃผ ๋ง์ดํ์ด์ง์ด๋ฉฐ ํ์ฌ ์์ ์ ๊ฐ์์ง ์ญ์ ๊ธฐ๋ฅ์ด๋ค.
ํ์ฌ dogId๋ก ๊ด๋ฆฌ๋๋ฉฐ dogId๋ฅผ ํตํด ๊ฐ์์ง๋ฅผ ์ญ์ ๋ฐ ํ์ฑํํ ์ ์๋ค.
๊ฐ์์ง ํด๋ฆญ ์ ํด๋น ๊ฐ์์ง์ dogId๋ฅผ ์ ์ฅํ๊ฒ ๋๋ค.
dog๊ฐ ์ญ์ ๋๋ฉด dogId๋ฅผ doglist ์ฒซ๋ฒ์งธ dogId๋ก ๋ณ๊ฒฝํด ์ฃผ๋ ค๊ณ ํ๋ค.
๋ค๋ง doglist๋ ์์ ์ปดํฌ๋ํธ์์ ํธ์ถ๋๋ ๋ฐ์ดํฐ๊ณ ์ด๋ฅผ props๋ก ๋ด๋ ค ์ฃผ๊ฑฐ๋ recoil๋ก ๊ด๋ฆฌํ๊ธฐ์ ๋ถํ์ํ ์์ ์ด ๋ง์์ง๊ฒ ๋์ด ๊ณ ๋ฏผํ๊ฒ ๋์๋ค.
Tanstack Query๋ฅผ ์ฌ์ฉํด ์๋ฒ ์ํ๋ฅผ ๊ด๋ฆฌํ๊ณ ์์ด ์ด๋ถ๋ถ์ ํ์ฉํ๊ณ ์ถ์๋ค.
Tanstack Query์ ๊ฐ์ฅ ํฐ ์ฅ์ ์ค ํ๋๋ ๋ฐ์ดํฐ๋ฅผ ์บ์ฑ ํ ์ ์๋ค๋ ์ ์ด์ง ์์๊น ์ถ๋ค.
๋ค๋ง ์ด ๋ฐฉ๋ฒ์ ํด๋น ์ปดํฌ๋ํธ์ ๊ตณ์ด ํธ์ถํ ํ์๊ฐ ์์ ์๋ ์๊ณ , ์์ ์ปดํฌ๋ํธ์์ ์ด๋ฏธ ํธ์ถํ๊ณ ์๋ค๋ฉด ์ค๋ณต ํธ์ถํ๋ ์ ์ด๋ค.
์ต์์ ์ปดํฌ๋ํธ์์ ํธ์ถํ๊ณ ์๋ ๋ฐ์ดํฐ ์๊ณ ,
๋ด๊ฐ ์์
ํด์ผํ๋ ์ปดํฌ๋ํธ๋ ๋ ๋ฒ์งธ ํ์ ์ปดํฌ๋ํธ๋ก ํ๋์ ๊ธฐ๋ฅ ์์
์ ํ์ํ ๋ฐ์ดํฐ๋ฅผ ์ํด props๋ก ๊ด๋ฆฌํ๋๊ฒ ๋ง์๊น ์ถ์๋ค.
recoil์ ํ๋ก ํธ์์ ์ํ๋ฅผ ๊ด๋ฆฌํ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ก ์๋ฒ ์ํ๋ฅผ ๊ด๋ฆฌํ๊ธฐ์ ์ ํฉํ์ง ์์๋ค.
๋ฆฌ๋ก๋ํ ๊ฒฝ์ฐ ๋ฐ์ดํฐ๊ฐ ์ด๊ธฐํ ๋๊ธฐ ๋๋ฌธ์ ๋ฐ์ดํฐ๋ฅผ ์ ์งํ๋๋ฐ ํ๊ณ๊ฐ ์๋ค.
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์๋ ๋ค์ํ ๋ฉ์๋๊ฐ ์กด์ฌํ๊ธฐ์ ํ๋ ์ฉ ํ์ต ํ๋ ๊ฐ๋ ์ผ๋ก ๊ณต๋ถํด์ผ๊ฒ ๋ค.