Cannot read properties of undefined (reading 'map') 오류

로그인 후 유저 데이터는 잘 받아오고 배열도 잘 있는데 이 오류가 떠서 의아했다. 찾아보니 리액트에서 화면이 처음 렌더링될 때 발생하는 오류인 것 같다. 다시 화면을 새로고침하면 화면이 정상적으로 나온다.

 

이 오류가 발생하는 이유는 리액트는 렌더링이 화면에 커밋된 후에야 모든 효과를 실행하기 때문이라고 한다. 즉, map을 실행할 배열이 아직 undefined 상태이기 때문에 이런 일이 발생하는 것이다. 

 

이 오류를 해결하려면 3가지 방법을 이용하여 해결할 수 있다.

1. map이 실행되는 배열을 빈 배열로 초기화시켜준다.
2. 삼항 연산자 또는 && 연산자를 이용하여 객체의 속성값이 없거나 undefined라면 map 함수가 실행이 되지 않게 한다.
3. optional chaining 연산자(.?)를 이용하여 객체의 속성값이 없거나 undefined라면 map 함수가 실행되지 않게 한다.

 

[참고]

How To Fix the “TypeError: Cannot Read Property 'Map' of Undefined” Error in React