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

useEffect에서 axios 요청으로 데이터를 받아온 후 그 데이터를 이용해 반복되는 컴포넌트를 map 함수로 생성해 뿌려주는 과정에서 에러가 발생했다.

원인

useEffect deps를 빈 배열로 설정하면 컴포넌트가 처음 생성될 때, 즉 컴포넌트가 마운트된 후에(componentDidMount 시점) 내부 로직이 실행된다.

즉, 최초 렌더링 시에는 아직 데이터를 받아오지 않아서 비어있는데 map을 사용하려고해서 에러가 발생한 것이다.

해결

if문 or && 연산자 or 옵셔널 체이닝(?.)을 이용한다.