[React] Error :: Cannot read property 'map' of undefined

배열로 이루어진 데이터를 map 메소드를 사용하여 출력하는 과정에서 다음과 같은 에러가 발생했다.

TypeError: Cannot read property 'map' of undefined

멀쩡하게 잘 돌아가던 map이 왜 알수 없는 property인지 이해가 안갔다.

 

문제는 React의 랜더링 순서 때문이다.

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

즉, React는 return에서 반복실행을 할 때 첫 턴에 데이터가 아직 들어오지 않더라도 렌더링이 실행된다.

이 때문에 데이터를 사용하여 반복문을 돌리는 map은 undefined인 데이터로 반복문을 돌려 에러가 발생하는 것이었다.

 

버튼을 클릭하면 클릭한 데이터의 좌표 이력을 새로운 페이지의 지도에 보여주는 기능을 만들고 있었다.

하지만 데이터가 넘어오기 전 지도가 먼저 rendering 되면서 undefined 상태의 좌표가 마커가 찍히려 해 발생한 문제이다.

 

이것을 해결하기 위해 코드를 아래와 같이 수정하였다.

const handleMappingCoordin = (tagList) => {

        if(map && Array.isArray(tagList)) {

                       //  세부내용 생략

지도인 map가 태그 정보를 담고 있는 tagList가 모두 load 된 후에 좌표가 찍히도록 수정하였다.