Uncaught TypeError: Cannot read properties of undefined (reading 'map')
오류가 뜬 경험이 있을 것이다. API로 받아온 데이터들이 배열이 아닌건가?...자세히 찾아보았지만 도대체 뭐 때문에 뜨는건지 알길이 없어서 뭔지 몰랐었다. 몇일 전까지는.....

하지만, 구글링이 역시 답 🥹

✔ 오류발생

아래 코드를 실행하면

{latestData?.results
  .map((movie: any) => (
    <Box
    	key={movie.id}
    	layoutId={movie.id + ""}
		variants={boxHoverVariants}
		initial="normal"
		whileHover="hover"
		transition={{ type: "tween" }}
		bgphoto={makeImagePath(movie.backdrop_path, "w500")}
    >
	</Box>
))}

에러 발생............🤔🤔🤔

---

✔ 원인

React가 아직 받지 못한 배열(latestData)을 map으로 돌리려하니 undefined를 반환하는 것이다.

즉, API 요청 데이터가 도착하기도 전 map 메서드가 호출된 것이 오류의 원인.
(정의되지 않은 값 혹은 null값인 데이터)

---

✔ 해결방법

메서드 실행을 늦추거나, 배열임을 미리 알릴 수 있는 3가지 해결방안을 찾았다.

1. 상태 변수를 빈 배열로 초기화

state에 배열임을 표시해서 초기화하는 방법 👉 useState([])

function MyComponent() {
  const [myList, setMyList] = useState([]);

  return (
    <ul>
      {myList.map(item => <li>{item}</li>)}
    </ul>
  );
}

2. 비교 연산자 or 논리 연산자(&&) 사용

비교 연산자 or 논리 연산자를 사용하여 매핑하기 전에 배열 변수가 정의되어 있는지 확인하는 방법.

{latestData && latestData?.results
  .map((movie: any) => (
    <Box
       key={movie.id}
  	   layoutId={movie.id + ""}
	   variants={boxHoverVariants}
  	   initial="normal"
  	   whileHover="hover"
  	   transition={{ type: "tween" }}
  	   bgphoto={makeImagePath(movie.backdrop_path, "w500")}
    >
	</Box>

✅ 위 코드는 2번째 방법으로 해결이 가능했다

3) 선택적 연결 연산자(?.) 사용

배열로 정의되어있지 않은 경우,
오류를 발생시키지 않고 배열의 map메서드와 같은 속성에 안전하게 액세스하는 방법.

function MyComponent() {
  const [myList, setMyList] = useState();

  return (
    <div>
      {myList?.map((item) => (
        <p>{item}</p>
      ))}
    </div>
  );
}

---

참고

📌 새발개발자님 블로그
📌 kinsta - How To Fix the “TypeError: Cannot Read Property ‘Map’ of Undefined” Error in React