[REACT] TypeError: Cannot read property 'map' of undefined 해결하기

 React에서 리스트를 받아올 때 자주쓰는 구조로 state.map()을 사용하다 발생한 오류를 해결하지 못해 직접 찾아보고 찾은 답을 정리한다.

 

 

왜....도대체 왜..안되는걸까?? 한참 고민하다 발견한 답

 

 React 는 렌더링이 화면에 커밋 된 후에야 모든 효과를 실행하기 때문이다. 즉 React는 return에서 state.map(...)을 반복실행할 때 첫 턴에 데이터가 아직 안들어와도 렌더링이 실행되며 당연히 그 데이터는 undefined로 정의되어 오류가 나는 것

즉 첫번째 값이 없기 때문에 생기는 오류이다.

 

해결방법은 2가지이다.

1. &&

state && state.map()구조로 사용하기.

 

JavaScript에서 true && expression은 항상 expression으로 실행되고 false && expression은 항상 false로 실행된다. 따라서 조건이 참이면 && 바로 뒤의 요소가 출력에 나타난다. 거짓이면 React는 무시하고 건너뛴다. 

 

2. useState([ ])

 useState([ ]) 처음 값에 값이 없다는 걸 입력해주면 오류가 나지 않는다.