[ React ] Map 메서드 오류가 발생하면 이것을 작성하자!

< 오늘은 너구나.. >

이번 오류는 사실 몇번 만나봤던 친구다..
익숙한 이친구에 대해 조금 정리해 보려한다.

먼저,

이 친구의 생김새..

왜? 어째서? 이런 상황이 왜 생기는 거지?
라고 생각을 했지만

여기서 핵심 ,

모두가 알겠지만 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} />;
          })}          

틀린 그림 찾기 ?
처럼 보일 수 있지만 & 연산자를 ?하나로 대체가 가능하다.

그리고 이외 여러가지 방법이 있지만 아직 성장중인 나에게는 최선? 의 방법..

해결완료!

별거 아닌 글이지만,,

나도 오류를 만날때마다 의문을 가지고 검색을 하며 도움을 받는데
그 도움 받은 만큼 누군가에게는 이 글이 도움 될 수 있었으면 좋겠다 !

마지막으로~

< 오늘도 개똥이는 성장한다 ! >