Uncaught TypeError: Cannot read properties of undefined 비동기를 이용했을때 렌더링 순서차이에 의해 생길 수 있는 오류

인기영화 추천 사이트를 구현하다 간단해 보이지만 해결되지 않는 오류를 발견했다.

여기서는 movie라는 프로퍼티를 받을 수 없다는데 그럴리가 없다...

 

오류 부분의 코드를 보자

import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";

const Detail = () => {
  const [detail, setDetail] = useState({});
  const { id } = useParams();

  const getDetail = async () => {
    const json = await (
      await fetch(`https://yts.mx/api/v2/movie_details.json?movie_id=${id}`)
    ).json();

    setDetail(json);
  };

  useEffect(() => {
    getDetail();
  }, []);

  console.log(detail.data.movie);  ////여기부분

  return (
    <div>
    </div>
  );
};

export default Detail;

분명 나는 aysnc await으로 api를 비동기처리로 가져왔기 때문에, detail안에는 api가 들어가야한다...

 

뭐가문제일가... 처음부터 객체 안으로 한칸한칸씩 들어가보자

 

1. console.log(detail)

성공이다?..

 

데이터가 들어갔다는건 확실해졌다!

 

객체로 진입들어가자

 

2. console.log(detail.data)

오! 여기까지도 들어가진다

 

더들어가보자

 

3. console.log(detail.data.movie)

후.. 일단 detail.data.movie가 안된다는건데 왜일까?

 

내가 객체구조를 잘못알고 있는건가?

 

이게 아니라고?

console.log(detail.data)

내가 보고있는 moive:{...}은 뭐길래 여기로 안들어기지는 걸까 도대체 정의가 되어있는데 왜 undefined라는 오류를 띄우는걸까

 

너무 어이가 없어서 console.log(detail)과 console.log(detail.data.movie)를 동시에 써봤다

이건 또 뭐야!!!!

 

왜 moive로 진입을 하는 순간만 빈 객체가 되어버리는 것일까 평소엔 문제도 없다가

 

useState로 처음에 detail의 초기값을 빈 객체 {}로 했기 때문에 첫줄의 {}은 용납이 된다.

 

그런데 보다싶이 detail을 업데이트 해줄때 비동기처리로 fetch가 된 후에 업데이트했다.

const getDetail = async () => {
  const json = await (
    await fetch(`https://yts.mx/api/v2/movie_details.json?movie_id=${id}`)
  ).json();

  setDetail(json);
};

 

그래서 두번째 줄이 용납이 안되는 부분이다..

---

규칙의 발견

갑자기 된다? 규칙의 발견

 

console.log(detail.data.movie);

여기서 새로고침을 하면?

 

다시 에러가 발생한다.

 

이제는 문제는 새로고침에 있다는 거에 확실해졌다.

 

뭐라 질문할지 느낌이 왔다. gpt에게 물어보자

gpt가 말한데로 코드를 고쳣는데 성공이다!!!!

---