[React] Cannot read properties of undefined (reading 'map')

props로 받은 비디오 목록들을 map으로 하나씩 돌며 video item들을 만들고 싶은데 아까는 됐다가 안됨

import React from "react";
import VideoItem from "../video_item/video_item";
import styles from "./video_list.module.css";

const VideoList = (props) => (
  <ul className={styles.videos}>
    {props.videos.map((video) => {
      return <VideoItem key={video.id} video={video} />;
    })}
  </ul>
);

export default VideoList;

Cannot read properties of undefined (reading 'map')

undefined 속성은 읽을 수 없습니다 (map 읽을 때)

> videos가 undefined이라서 map을 사용할 수 없음

---

이유

콘솔을 찍어서 확인해보니 받아오는 videos가 undefined이었음

리액트는 렌더링이 된 후 효과들을 실행함, 데이터가 안들어와있어도 일단 렌더링을 실행

map을 돌릴 데이터가 아직 안들어왔으니 돌릴 게 없다고 오류가 나는 것이었다.....

 

&&을 사용해서 데이터가 있을 때 map을 실행하라는 말이 있었음 > 하지만 해도 안됨

 

constructor안에 state를 초기화하거나 빈 값을 처리하라는 말도 있음

 

 

해결

네트워크 통신하는 코드를 그냥 함수로 짤 때는 동작하는데 async / await을 사용해서 비동기 함수로 바꾸면 동작하지 않음

그래서 async를 빼버림... 잘 동작함....

 

콘솔에 찍어보니까 async로 하면 네트워크 결과값이 undefined 찍히고 비디오리스트가 찍힘.... 왜...? 모르겠음....

 

+나중에 아는 게 많아지면 다시 찾아봐야겠음