React 실행오류_Cannot read property 'map' of undefined

문제

---

다음과 같이 서버에 게시글을 포스트 한 뒤 사용자가 쓴 게시글들을 화면 상에 랜더링하는 과정 중에 다음과 같은 문제가 발생하였다.

게시글에 달아 둔 태그들을 서버에서 배열로 가져와, map()을 이용하여 각 태그에 링크를 달아주는 소스 코드 상에서 에러가 나왔다.

 

문제해결

리덕스에서 상태가 업데이트가 되고 컨테이너에서 바뀐 상태 정보를 인지하고 리랜더링 된다.

 

하지만 이때 만약에 서버에서 받아 온 payload 값 중 태그의 값이 없다면(게시글 작성 단계에서 태그를 별도로 달아주지 않았을 경우)tags 배열은 빈 배열 객체이기 때문에 undefined로 정의되어 오류가 발생했던 것이다.

{tags && tags.map(tag => (
                <Link className="tag" to={`/?tag=${tag}`} key={tag}>
                    #{tag}
                </Link>
            ))}

다음과 같이 && 연산자를 사용하여 tags 값이 존재할 경우에만 해당 map을 시행해 주도록 수정하여 문제를 해결하였다.