메인 페이지가 데이터를 받지 못할때

갑자기 발견한 오류
처음 메인 페이지를 랜더링 하면 서버에서 데이터를 잘가져오지만
다른 페이지로 갔다가 뒤로가기로 돌아가면 이상하게 로딩이 되지 않는것
그래서 서버에서 데이터를 가져올 시간이 없어 리액트는 데이터가 없어 에러를 뛰어 버렸다.

첫시도

데이터를 맵으로 뿌리는곳에 옵셔널체인징을 걸어 보았다

결과 실패

두번째 시도

유즈이펙트를 사용하면 되지 않을까라는 생각에 사용해봄
하지만 여전히 로딩중이 띄어지지 않았다..

결과 실패

세번째 시도

다량의 데이터를 가져오는데 시간이 필요하다면 셋타임 아웃을 걸어 데이터를
받을 시간을 벌어보자

결과 성공

아래는 코드

export const Main: React.FC = () => {
  const queryClient = useQueryClient();
  const [showData, setShowData] = useState(false);
  const { isLoading, isError, data } = useQuery("mainPost", getHomePosts);

  useEffect(() => {
    const delay = 300; 
    if (!isLoading && !isError) {
      setTimeout(() => {
        setShowData(true);
      }, delay);
    }
  }, [isLoading, isError]);
  
  if (isError) {
    return <p>오류가 발생하였습니다...!</p>;
  }

  console.log("data", data)

  return (
    <div>
      <Header/>
      <StCardContainer>
      {showData && data?.map((item: cardItem) => (
          <Cards key={item.id} items={item} />
        ))}
      </StCardContainer>
    </div>
  )
}