react에서 map 함수 사용 중 만난 에러!
todoItem.map is not a funcion
map이 왜 함수가 아니야~~?!!
다양한 이유가 있을텐데 내가 경험한 이유에 대해 이야기 해보겠다.
map 함수는 무엇인가
일단 map 함수에 대해 알아야 왜 이런 에러가 발생하는지 알 수 있다.
map 함수는 배열을 순회해서 각 요소를 콜백 함수로 적용해서 처리해 모은 새로운 배열을 반환하기 위한 함수
즉!!! map 함수는 배열로 데이터를 가져오고 배열로 반환한다!!!
에러 원인 파악
console.log(res.data)를 통해 응답 데이터의 로그를 찍어봤는데 응답이 오지 않고 있었다.
그래서 DB와의 연결이 제대로 되고있지않다고 판단.!
user의 권한 정보를 확인해보았다.
모든 권한이 Y 즉, 모든 권한을 사용할 수 있어야한다.
하지만? user에 권한이 없어 데이터를 응답할 수 없었던 것이다.
에러 해결
user에게 모든 권한 주기!
-- 현재 유저 확인
SELECT * FROM mysql.user;
-- 유저 생성
CREATE USER '유저 이름'@'%' IDENTIFIED BY '비밀번호';
-- 생성한 유저에게 모든 권한 부여
GRANT ALL PRIVILEGES ON *.* TO '유저 이름'@'%' WITH GRANT OPTION;
-- 캐시 지움
FLUSH PRIVILEGES;
-- 현재 사용중인 MySql의 캐시를 지우고
-- 새로운 설정을 적용하기 위해서 사용되는 명령어
-- 사용자 권한 등을 변경하였을 때, MySQL에 변경사항을 적용하기 위해서 사용다음과 같이 유저에 권한을 부여하면 DB가 데이터를 제대로 보낸다.
깨달은점
에러가 났을땐 에러 메세지를 유심히 살펴보자.
분명히 해결할 힌트가 있을것!
그리고 가장 중요한 포인트는 console.log(res.data)와 같이 에러난 코드의 데이터 값을 로그로 찍어보기!
이번 에러를 정리하자면
1. map 함수가 함수가 아니라는 에러
2. map 함수의 특징을 생각 -> 배열로 데이터를 받아옴.
3. 로그를 찍어 더욱 자세한 에러 메세지 찾기
끝으로 에러를 두려워하지말자! 😅
출처 및 참고
1. https://ygdev84.tistory.com/9
2. [새싹 X 코딩온] 영등포 캠퍼스 6기 입문자도 가능한 웹 개발자 부트캠프 강의 교안
