TIL - 데이터 로딩 속도(의존성 순서 확인)

데이터 A 의 a 값과 B의 b 값이 현재 페이지에서 불러오는 C의 a, b 값과 일치할 경우와 그렇지 않은 경우로 화면을 다르게 그려주고 있다.

신청 전 / 신청 후 UI

 

Problem

---

A(mainChallenge) 데이터를 불러오고 A의 a 값과 B의 b 값으로 필터링한 C(joinChallenge) 데이터를 받아와야하는데 안들어온다.

 

Solve

---

C 데이터를 호출하는 함수에서 조건을 잘못걸어줬다.

A값과 비교하기 위해 A값을 받은 후 맞는 데이터만 불러오는 로직인데 의존성을 잘못 넣었다.
같은 데이터를 불러오더라도 언제 어디에서 어떻게 불러올지 잘 생각하자~~~

  // 페이지 로딩하면서 불러오고 있음
  useEffect(() => {
    const fetchData = async () => {
      await userJoinChallengeCheck();
    };

    fetchData();
  }, []);
  
  
  // A를 불러올 때만 C 데이터 get
    useEffect(() => {
    const fetchData = async () => {
      await userJoinChallengeCheck();
    };

    if (mainChallenge) {
      fetchData();
    }
  }, [mainChallenge]);