Closed un0211 closed 2 months ago
ํ์ฌ ๋์๋ณด๋ ๋ด ์ปฌ๋ผ์ useQuery(useFetchData)๋ก queryKey๋ฅผ ๋ฑ๋กํด ๋ถ๋ฌ์ค์ง๋ง, ๊ทธ ์์ ์๋ ์นด๋๋ ๊ทธ๋ฅ ์ปฌ๋ผ ๋ชฉ๋ก์ด ๋ฐ๋๋๋ง๋ค get์ผ๋ก ๋ถ๋ฌ์ค๊ณ ์์ต๋๋ค. ์นด๋ ์์ฑ ์ ์นด๋ ์ ๋ณด๋ ๋ฐ๋ก ๋ฐ์ํ๋ ค๋ฉด ์นด๋๋ useQuery(useFetchData)๋ก ๋ถ๋ฌ์์ผ ํ ๊ฒ ๊ฐ์ต๋๋ค!
ํ์ฌ ์ฝ๋
https://github.com/Part3-Team15/taskify/blob/5203abcd104af14ec914b3b40584f1c31b72cca1/src/containers/dashboard/ColumnsSection.tsx#L20
const { data: columns, isLoading, error, } = useFetchData<ColumnsResponse>(['columns', id], () => getColumnsList(Number(id))); const columnList = columns?.data; const [cardLists, setCardLists] = useState<Record<number, CardType[]>>({}); useEffect(() => { if (columnList) { columnList.forEach((column) => { const fetchCards = async () => { const { data } = await getCardsList(column.id); setCardLists((prev) => ({ ...prev, [column.id]: data.cards })); }; fetchCards(); }); } }, [columnList]);
์นด๋ ๋ณํ๋ฅผ ๋ฐ์ํ ์ ์์
https://github.com/Part3-Team15/taskify/assets/24778465/fb302714-e9c4-4ee1-afcd-3a979927d9dd
๋ฒ๊ทธ๋ฆฌํฌํธ ๊ฐ์ฌํฉ๋๋ค ๐โโ๏ธ ์ด ์ด์๋ ์ ๊ฐ ๋งก๊ฒ ์ต๋๋ค! ์ด ๋ถ๋ถ์ ์ ๊ฐ SSR ์ ์ฉํ๋ฉด์ ๊ฑด๋๋ ค์ผ ๋ ๊ฒ ๊ฐ์์!!
๐ ๋ฒ๊ทธ ์ค๋ช
ํ์ฌ ๋์๋ณด๋ ๋ด ์ปฌ๋ผ์ useQuery(useFetchData)๋ก queryKey๋ฅผ ๋ฑ๋กํด ๋ถ๋ฌ์ค์ง๋ง, ๊ทธ ์์ ์๋ ์นด๋๋ ๊ทธ๋ฅ ์ปฌ๋ผ ๋ชฉ๋ก์ด ๋ฐ๋๋๋ง๋ค get์ผ๋ก ๋ถ๋ฌ์ค๊ณ ์์ต๋๋ค. ์นด๋ ์์ฑ ์ ์นด๋ ์ ๋ณด๋ ๋ฐ๋ก ๋ฐ์ํ๋ ค๋ฉด ์นด๋๋ useQuery(useFetchData)๋ก ๋ถ๋ฌ์์ผ ํ ๊ฒ ๊ฐ์ต๋๋ค!
์ํฉ
ํ์ฌ ์ฝ๋
https://github.com/Part3-Team15/taskify/blob/5203abcd104af14ec914b3b40584f1c31b72cca1/src/containers/dashboard/ColumnsSection.tsx#L20
์นด๋ ๋ณํ๋ฅผ ๋ฐ์ํ ์ ์์
https://github.com/Part3-Team15/taskify/assets/24778465/fb302714-e9c4-4ee1-afcd-3a979927d9dd
์ฝ๋ฉํธ