[React] Error: Cannot read properties of undefined (reading ~)

Cannot read properties of undefined

 

Uncaught TypeError: Cannot read properties of undefined (reading 'length')

Cannot read properties of undefined 에러는 화면이 렌더가 되지 않을때 콘솔창을 키면 자주 볼 수 있는 오류 메시지다.

에러내용은 친절하게 설명해준대로 undefined 의 프로퍼티를 읽을 수 없다는 것이다.

 

(무엇을 읽을 수 없는지 어디서 에러가 발생했는지도 친절하게 알려준다.)

 

오탈자 문제가 아니라면 사용하는 state가 실제로 undefined란 얘긴데,

useState는 비동기로 작동하기 때문에 페이지가 그려지기 전까지 undefined를 가지고 있다가

페이지가 그려진 후 필요한 state를 넣어준다.

 

해결 방법

 

해결 방법은 조건문, && 연산자, 옵셔널 체이닝( ?. )을 활용하면 된다.

모두 값이 있을 때만 렌더링할 수 있도록 도와주는 친구들이니 오류를 해결할 수 있다.