안녕하세요 행복이님들 혀누킴입니다. 눈물의 카카오맵 구현하기 시리즈 2탄을 들고 왔습니다. 오늘은 JavaScript의 'this'에 대해 이야기하고자 합니다. 팔로팔로미~!
왜 데이터에 접근이 되지 않을까?
담기 아이콘을 클릭할 때, 해당 장소를 wishPlaceList에 추가해야 하는 상황이었습니다. 마커와 커스텀 오버레이를 맵에 올리는 함수 내에서, 담기 아이콘의 클릭 이벤트가 발생할 때 실행할 함수를 구현하는 과정에서 wishPlaceList 데이터에 접근할 수가 없었습니다. this.wishPlaceList가 콘솔에서 undefined로 출력되고, push를 사용할 수 없다는 에러 메시지를 뱉어냈습니다. 카카오맵 API 공식 문서와 QnA, 구글링을 통해(내 주말..) js 문법 중 'this'를 정확하게 알지 못한 것이 문제였음을 알게 됐습니다.
data() {
return {
wishPlaceList: [],
}
}methods: {
addPlaceMarker(map, place) {
...
var placeAddImg = document.createElement('img')
placeAddImg.setAttribute('src', require('@/assets/map/add2.png'));
// 클릭 로직
placeAddImg.addEventListener('click', function() {
console.log(this) // placeAddImg
const wishPlace = {name : place.name, address: place.address, longitude: place.longitude, latitude: place.latitude, kakao_url: place.kakao_url}
this.wishPlaceList.push(wishPlace)
});
},
}this
다음은 this에 대한 설명입니다.
-
메소드로 정의한
화살표 함수내부의 this는 메소드를 소유한 객체, 즉 메소드를 호출한 객체를 가리키지 않고 상위 컨택스트인전역 객체 window를 가리킨다. -
function 키워드로 정의한 일반 함수를 사용할 경우, addEventListener 함수의 콜백 함수 내부의 this는 이벤트 리스너에바인딩된 요소를 가리킨다.
문제였던 코드의 경우는 후자에 해당했던 것입니다. this는 Img 태그를 가리키고 있었고, 이러한 이유 this.wishPlaceList가 콘솔에서 undefined로 출력됐으며, push를 사용할 수 없다는 에러 메시지를 뿜어냈던 것입니다. 다음과 같이 화살표 함수를 사용하는 코드로 수정하면서 비로소 wishPlaceList에 접근할 수 있었습니다.
methods: {
addPlaceMarker(map, place) {
...
var placeAddImg = document.createElement('img')
placeAddImg.setAttribute('src', require('@/assets/map/add2.png'));
// 클릭 로직
placeAddImg.addEventListener('click', () => {
console.log(this) // 전역 객체 window
const wishPlace = {name : place.name, address: place.address, longitude: place.longitude, latitude: place.latitude, kakao_url: place.kakao_url}
this.wishPlaceList.push(wishPlace)
});
},
}배웠던 내용이었는데 정말 까맣게 잊고 있었습니다.. 기본에 충실합시다. 고생한만큼 기억에 오래 남기를 바랍니다 🥲
참고 자료
