[React] Cannot read property 'map' of undefined 해결

* 문제 상황 : 메인화면에 보여줄 이미지들을 일일이 작성하기보단 map을 이용하려고 했음

* Cannot read property 'map' of undefined 오류 발생

 

 

* 문제 해결에 도움을 준 블로그

https://devbirdfeet.tistory.com/47

React 실행오류 Cannot read property 'map' of undefined

 

* 원인 : return에서 images.map()을 반복실행 시 첫 턴에 아직 데이터가 들어오지 않아도 렌더링이 실행, 그 데이터는 undefined로 정의되어 오류가 나는 것

 

* 해결 && 이용

 

[수정 전]

 

//수정 전
function Test(props) {
  return (
    <div>
        {props.images.map((image, index) => (
            <div key={index}>
              <img
                style={{ width: "250px", height: "120px" }}
                src={`http://localhost:5000/${image}`}
              />
            </div>
          ))}
    </div>
  );
}

export default Test;

 

 

[수정 후]

 

//수정 후
function Test(props) {
  return (
    <div>
        {props.images && //이 부분 추가
          props.images.map((image, index) => (
            <div key={index}>
              <img
                style={{ width: "250px", height: "120px" }}
                src={`http://localhost:5000/${image}`}
              />
            </div>
          ))}
    </div>
  );
}

export default Test;