Uncaught TypeError: Cannot read properties of undefined (reading 'map') 배열 렌더링 오류

jsonplaceholder.typicode.com/todos 를 호출해서

todo 데이터를 리액트 쿼리를 이용 간단한 조회 화면 하나 만들려 하는데 에러가 난다.

 

유투브를 보며 코딩을 따라하는 와중... 난 에러가 나는데...

 

 

원인은 리액트의 렌더링 방식에 있다.

화면은 모두 렌더링을 했는테 그 시점에 그릴 수 있는 data가 없는 경우다.

 

자주 만나는 발생 원인이다. 리액트의 렌더링 및 데이터의 페치의 타이밍 이해가 필요하다.

해결 방법

  return (

    <>

      <ul>

        {data.map((item: todo) => (

          <li key={item.id}>{item.title}</li>

        ))}

      </ul>

    </>

  );

 

 

기존 방식에서 data가 없다면 이라는 if문이 필요하다.

  return (

    <>

      <ul>

        {data && data.map((item: todo) => <li key={item.id}>{item.title}</li>)}

      </ul>

    </>

  );

 

코드 변경 후, 실행 결과

 

자바스크립트 문법 중

&&의 쓰임새

if => true && expression => true로 실행

false && expression  => false 실행

추가로 더 간단한 방법도 있다.

   {data?.map((item: todo) => (

          <li key={item.id}>{item.title}</li>

        ))}

 

data 뒤에 data? 물음표를 붙이는 방법이다.

서버에서 받아오는 데이터의 실제 타입형식은 undfiened 다. 없을 수도 있다는 것을 가정하는 거임. 그래서 타입스크립트 ? 를 붙여도 가능. 

      <ul>

        {data?.map((item) => (

          <li key={item.id}>{item.title}</li>

        ))}

      </ul>

 

item:todo 인터페이스를 지정하지 않아도 된다.

방법이 많구나.

 

프로그래밍도 이렇게 방법이 많은데... 사람 살아가는 것도 사람마다 인생 사는 방법이 다르다.