.map() is not a function 에러 해결

역시나 Blog Project를 진행하던 중...

우리의 친구 TypeError! 하도 많이 만나서 이제는 익숙하다.

X.map() is not a function 에러는 → .map은 Array에 해당되는 함수!

따라서 X가 Array가 아닌 형태일때는 TypeError가 뜨고 만다.

 

즉 위 사진의 경우에는 data라는 녀석이 Array가 아닐 가능성이 오천퍼센트!

 

data는 API 요청을 통해 받아온 값들을 map으로 return해 준 녀석이다.

 

전체 코드!

받아온 data 상태를 다시 mapping 해주면서 렌더링하고 있다.

 

data를 console에 찍어보면 정체가 밝혀지겠지!

 

어...라라? Array 형태가 맞는데???

Array.map()을 했는데 왜 is not a function 에러가 뜬걸까???

 

 

해결책은 바로... 렌더링 화면에서 data이면 → map 함수가 실행되도록 만들어주면 된다!!!

 

어째서? 제일 처음 해당 컴포넌트가 랜더링됬을 때 data가 받아와있지않으면,

당연히 data.map()은 함수가 아니게 된다! data에 아무 것도 없으니까!!!