< 오늘은 너구나.. >이번 오류는 사실 몇번 만나봤던 친구다..
익숙한 이친구에 대해 조금 정리해 보려한다.
먼저,
이 친구의 생김새..
왜? 어째서? 이런 상황이 왜 생기는 거지?
라고 생각을 했지만
여기서 핵심 ,
모두가 알겠지만 map 메서드는 빈배열, 배열 형태가 아니면 읽을 수 없다. 근데 여기서 또다른 의문점
fetch 함수를 이용하여 데이터를 잘받아오는데 왜..?
console 을 찍어보았을 때 배열형태로 데이터가 잘들어오고 있었다.
뭐야..?
본문으로 들어가기전
먼저 Map 메서드가 무엇인지 짚어보자
map() 메서드는 배열 내의 모든 요소 각각에 대하여
주어진 함수를 호출한 결과를 모아 새로운 배열을 반환.
자 .. 드루와..
어떤 에러인가?
함수 우선 실행,
Map 메서드가 데이터가 호출되기 전에 먼저 실행되어 발생한 오류이다.
에러 핸들링 방법
아래 와 같은 내용을 map 메서드 앞에 작성하자!
부족하지만 노력하고 있는 나의 자그마한,,코드를 사용해 표현 해본다..
{reviewList.review_list.map((review, idx) => {
return <Review key={idx} {...review} />;
})}
위와 같은 코드로 진행하면 이 글의 주제인 오류가 등장한다.
자 .. 여기에 이 코드를 이것 ! 을 추가해보자
이것이란 ?
&& 연산자 !!!!
설명을 하자면 호출 된 데이터가 있다면 ? 함수를 실행시켜라 !!
따라서 아래와 같이 코드를 작성할 수 있다.
{reviewList.review_list &&
reviewList.review_list.map((review, idx) => {
return <Review key={idx} {...review} />;
})} 작성된 && 연산자를 조금 간편하게 작성할 수 있다.
{reviewList.review_list?.map((review, idx) => {
return <Review key={idx} {...review} />;
})} 틀린 그림 찾기 ?
처럼 보일 수 있지만 & 연산자를 ?하나로 대체가 가능하다.
그리고 이외 여러가지 방법이 있지만 아직 성장중인 나에게는 최선? 의 방법..
해결완료!
별거 아닌 글이지만,,
나도 오류를 만날때마다 의문을 가지고 검색을 하며 도움을 받는데
그 도움 받은 만큼 누군가에게는 이 글이 도움 될 수 있었으면 좋겠다 !
마지막으로~
< 오늘도 개똥이는 성장한다 ! >