useEffect 예상속성

useState 훅을 이용해 초기값을 []로 준다 가정해보자.

ex)const [detailData,setDetailData] = useState([]);

그 후에 useEffect에서 api값을 불러오는데 그 값의 구조가 아래와 같다.

ex)

detailData[

title_long: "값",
  medium_cover_image: "값",
  description_full:"값'',
  genres: [값],
  torrents: [값]

]

이 값을 map을 통해 사용하고있다고 한다면 처츰 렌더링될 때는 값이 잘 나온다.

하지만 새로고침시에는 properties undefined에러가 뜨면서 참조를 못한다고 에러가 뜬다.

왜이럴까? useEffect는 detailData에 값을 넣어줬을 때 이 값은 예상속성으로 ~~를 가지고있어! 라고 설정한다고 한다.

예상속성은 위의 예시가 되겠다.

그래서 참조를 예상속성에 맞춰서 하려는데 우린 []로 초기화를해줬기에 왜 이 개체는 속성이 없어? 하면서 undefined를 부르는 것이다.

 

그래서 위의 구조처럼 데이터를 쓸때에는 초기값에 예상속성을 설정해주거나 null값을 넣어주어야한다.

ex)

const [detailData, setDetailData] = useState({
  title_long: '',
  medium_cover_image: '',
  description_full: '',
  genres: [],
  torrents: []
});

위와같이 state 훅을 설정해준다면 문제없이 새로고침시에 화면이 잘 도출될것이다.