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

 

 

 

React 는 렌더링이 화면에 커밋 된 후에야 모든 효과를 실행한다.

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

 

원래 1. 렌더링하고 2. useEffect 가 실행되고 데이터를 가져오고 3. 가져온 데이터를 이용해서 다시 렌더링한다.
따라서 현재 1번에서 현재 에러가 난 상태이다.

 

 

 

해결방법

---

1. &&을 이용한다.

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

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

<TagUl>
    {products.tags && products.tags.map((tag, i) => (
      <TagLi key={i}>
        <span>{tag}</span>
      </TagLi>
    ))}
</TagUl>

 

 

 

2. ?. (옵셔널 체이닝)을 이용한다.

?.는 products.tags가 있을 때만 뒤에 로직을 수행한다는 의미이다.

<TagUl>
    {products.tags?.map((tag, i) => (
      <TagLi key={i}>
        <span>{tag}</span>
      </TagLi>
    ))}
</TagUl>