Part3-Team15 / taskify

[์ค‘๊ธ‰ ํ”„๋กœ์ ํŠธ 15ํŒ€] taskify: ์Šค๋งˆํŠธํ•œ ์ผ์ • ๊ด€๋ฆฌ
https://taskify-15.vercel.app/
1 stars 3 forks source link

๐Ÿ› Bug: ๋Œ€์‹œ๋ณด๋“œ ์นด๋“œ ๋ชฉ๋ก ์ƒˆ๋กœ๊ณ ์นจ์ด ์•ˆ๋จ #182

Closed un0211 closed 2 months ago

un0211 commented 3 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

์ฝ”๋ฉ˜ํŠธ

wayandway commented 3 months ago

๋ฒ„๊ทธ๋ฆฌํฌํŠธ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค ๐Ÿ™‡โ€โ™‚๏ธ ์ด ์ด์Šˆ๋Š” ์ œ๊ฐ€ ๋งก๊ฒ ์Šต๋‹ˆ๋‹ค! ์ด ๋ถ€๋ถ„์€ ์ œ๊ฐ€ SSR ์ ์šฉํ•˜๋ฉด์„œ ๊ฑด๋“œ๋ ค์•ผ ๋  ๊ฒƒ ๊ฐ™์•„์š”!!