[에러일지] 🧩 Uncaught TypeError: Cannot read properties of undefined (reading 'map')

🧩 Uncaught TypeError: Cannot read properties of undefined (reading 'map')

🤦‍♂️ 문제점

{movieDetail.genres && movieDetail.genres.map((item)=>(
   <Badge bg="danger"><li>{item && item.name}</li></Badge>
))}

오늘 다룰 에러는 Uncaught TypeError: Cannot read properties of undefined (reading 'map') 가 뜨는 에러를 처리할 것이다.

자꾸 아래와 같은 error가 뜬다. 자꾸 자꾸만 뜨는데. 자 console.log로 출력해보자

console.log로 출력해보니 잘나오지만.. 왜 새로고침 하면 왜 에러가 뜨는 것일까??

그 이유는 React 는 렌더링이 화면에 커밋 된 후에야 모든 효과를 실행하기 때문이다.

즉 React는 return에서 user.map(...)을 반복실행할 때 첫 턴에 데이터가 아직 안들어와도 렌더링이 실행되며 당연히 그 데이터는 undefined로 정의되어 오류가 나는 것이다.

🙆‍♂️ 해결방안

바로 조건부 렌더링 && 을 이용하는 것이다.!!!!

  {movieDetail.genres && movieDetail.genres.map((item)=>(
      <Badge bg="danger"><li>{item && item.name}</li></Badge>
  ))}

true && expression은 항상 expression으로 실행되고 false && expression은 항상 false로 실행된다.

따라서 조건이 참이면 && 바로 뒤의 요소가 출력에 나타난다. 거짓이면 React는 무시하고 건너뛴다.