리액트 data.map is not a function 에러 해결

리액트에서는 return 문에서 JSX를 사용하기 때문에 직접적으로 for문과 같은 반복문을 사용하지 못한다.

 

굳이 사용하자면 JSX를 반환하는 함수를 선언하고 그 안에 반복문을 사용할 순 있겠지만 코드가 짧아질수록 편의성이 증가하므로 주로 map을 쓰는 편이다.

 

map 함수 에러

하지만 종종 위와 같이 map is not a function 에러가 나타나는 경우가 있다.

 

문제는 두 가지 경우로 나눌 수 있는데 첫 번째는 data 부분이 배열이 아닌 경우고, 두 번째는 data 변수가 배열로 데이터를 받기 전 렌더링이 되었을 경우다.

 

map 함수는 배열에 접근하기 위한 자바스크립트의 내장 함수이기 때문에 배열이 아닌 데이터(특히 객체)에 map을 사용할 경우 문제가 발생한다.

 

따라서 콘솔에 해당 변수를 찍어보면 배열이 아닌 경우가 대다수일 것이다.

 

하지만 간혹 가다 분명히 배열이 맞는데 위와 같은 에러가 나오는 경우가 있다.

 

이것은 두 번째 케이스인 변수가 배열의 데이터를 받기 전에 렌더링 되었을 경우다.

 

물론 useState([])처럼 빈 배열로 초기화하면 되지만 상황에 따라 불가능한 경우도 있을 것이다.

 

그럴 땐 데이터를 받아왔을 때만 컴포넌트를 렌더링 하면 된다.

 

즉, 문제 되는 변수가 data 라면 {data && data.map()}처럼 data 변수에 값을 받아왔을 때만 map 함수를 실행시키도록 변경하면 문제는 해결된다.

 

이때 중괄호({})로 감싸주는 것을 잊으면 안 된다.

 

 

=====  리액트를 처음으로 접해서 공부할 겸 정리한 것이라 적극적인 피드백 환영합니다!! =====