[React] useMemo, useEffect 에러 (인 줄 알았던 휴먼에러)

Problem

---

    // 정렬된 랭킹 데이터 - 메모이제이션 적용
    const rankingItems = useMemo(() => {
        if (!userRankingData || userRankingData.length === 0) return [];

        let sortedItems = [...userRankingData];
        console.log("sortedItems:", sortedItems);
        switch (sortBy) {
            case 'score':
                return sortedItems.sort((a, b) => b.score - a.score);
            default:
                return sortedItems;
        }
    }, [userRankingData, sortBy]);

    // 데이터 프리페칭
    useEffect(() => {
        console.log("fetching ...")
        prefetchRankingData();
    }, []);

⚠️

rankingItem 을 useMemo 로 데이터를 가져오는데 useEffect 를 사용하고 있는 와중 새로고침 시 rankingItems 가 먼저 실행이 되어 데이터를 가져오지 못하는 상황 발생

Why?

---

⚠️

useMemo : 렌더링 시작 시 호출되는 훅
useEffect : 렌더링 이후에 호출되는 훅

• 코드의 목적
  • prefetchingRankingData → rankingItems 최신화
• 렌더링 이후에 useEffect가 호출이 되기 때문에 useMemo가 먼저 호출되어 fetching이 제대로 되지 않는다.

Solve

---

prefecthRankingData() 에서 accounts 를 불러오는 함수가 잘못 설정 되어있었다.,,

지우고 refetch 함수를 제작해서 해결