React Hooks에서의 리액트 호출 순서로 인한 오류 about hello-world

[joonfluence]

Main.js

문제상황

광고 목록보다 글 목록을 먼저 불러올 경우, 해당 오류가 발생함. 문제는 useEffect 위치를 광고 목록부터 받아왔음에도 문제가 발생된다는 점이다.

이전 코드

const fetchPostList = async (pageNum, order, categoryNum, limitNum) => {
  const temp = await getPostList(pageNum, order, categoryNum, limitNum);
  setList(temp);
};

const fetchADList = async (pageNum, limitNum) => {
  const temp = await getADList(pageNum, limitNum);
  setAdList(temp);
};

useEffect(() => {
  fetchPostList(1, order, type, limit);
}, [type, limit, order]);

useEffect(() => {
  fetchADList(1, limit);
}, [limit]);

// 중략

return (
    <main>
      <div>
        <Nav />
        <div className="main__wrapper">
          <div className="main__login">
            <span>로그인</span>
          </div>
          <div className="main__container">
            <Filter
              type={type}
              setType={setType}
              order={order}
              setOrder={setOrder}
            />
            {list.map((item, i) => (
              <>
                <글목록 컴포넌트>
                {checkIsAd(i) ? <광고 컴포넌트  /> : null}
              </>
            ))}
          </div>
        </div>
      </div>
    </main>
  );

변경된 코드

return (
    <main>
      <div>
        <Nav />
        <div className="main__wrapper">
          <div className="main__login">
            <span>로그인</span>
          </div>
          <div className="main__container">
            <Filter
              type={type}
              setType={setType}
              order={order}
              setOrder={setOrder}
            />
            {list.map((item, i) => (
              <>
                <글목록 컴포넌트>
                {adList.length > 0 && checkIsAd(i) ? (<광고 컴포넌트 />) : null}
            ))}
          </div>
        </div>
      </div>
    </main>
  );

해결방법

• 광고 목록에 관한 useEffect의 호출 순서를 글 목록보다 높게 위치시켰음에도 글 목록이 먼저 렌더링되는 까닭은 네트워크 처리 시간의 차이라고 짐작된다.

• 위와 같이 adList.length가 0일 때만 렌더링되도록 설정해줌으로써, 광고 리스트를 불러온 뒤에 렌더링되도록 설정해줌으로써 간단하게 해결할 수 있었음.

react hooks에서 호출 순서와 관련된 자세한 내용은 아래 링크 참조

https://blog.logrocket.com/post-hooks-guide-react-call-order/