1.렌더링
2. useEffect가 실행되고 데이터를 가져오고
3.가져온 데이터를 이용해서 다시 렌더링
하는 과정 중 1번 과정에 데이터를 아직 안가져왔을 때 렌더링을 하여 에러가 발생.
undefined의 속성인 map을 읽을 수 없다는 내용이다. (undefined.map을 했단 소리)
이 문제를 해결하기 위해
true && expression을 사용하여 에러없이 깔끔하게 해결!
true && expression 이란
{ true && expression } 은 항상 expression
{ false && expression }은 항상 false
조건이 참이면 && 바로 뒤의 요소가 출력에 나타난다.
거짓이면 React는 무시하고 건너뛴다.
참고
https://ko.legacy.reactjs.org/docs/conditional-rendering.html
