자바스크립트에서 this의 역할

this를 간단히 설명하면 호출한 자신을 가리킨다. 그래서 element가 this를 가진 함수를 호출하면 자신을 나타내게 된다.

<button id="red">red</button>
<button id="blue">blue</button>
<button id="green">green</button>

위와 같이 세 개의 버튼이 있고, 버튼을 클릭하면 자신의 텍스트를 반환하는 이벤트를 만들어보자.

function handleClick() {
   console.log(this.innerText);
}

이 함수를 클릭이벤트에 연결시킨다면 각 버튼을 클릭할 때 마다 red, blue, green이라는 텍스트를 콘솔창에 나타낼 것이다.

문제는 arrow function 시에 this를 이렇게 사용할 수 없다는 것에 있다.

화살표 함수로 바꿔보기

화살표 함수를 사용하다가 엘리먼트에 this를 사용하기 위해 예전 함수 선언 형태로 사용하는 것도 이상하니 this를 사용 못하지만 위의 예제와 똑같이 표현이 가능하게 바꿔보자

 const handleClick = event => {
     console.log(event.target.innerText);
    console.log(event.currentTarget.innerText);
 }

해당 함수를 사용하면 버튼을 클릭 시에 똑같이 red, blue, green이 콘솔창에 나타날 것이다.

target과 currentTarget의 차이

지금은 같은 값을 반환하지만 target과 currentTarget의 차이가 있다.

그것은 target은 이벤트 버블링의 최하위 요소를 반환한다는 것이다.

div태그로 둘러싸인 span 태그가 있다고 가정해보자.

<div id="div"><span>span 태그</span></div>

const handleClick = event => {
    console.log(event.target);
    console.log(event.currentTarget);
}

해당 div 태그에 handleClick 리스너를 달고, 콘솔창을 확인해본다면

<span>span태그</span>
<div id="div"> ... </div>

이와 같은 형태로 반환하는 것을 확인할 수 있다.

즉 currentTarget은 이벤트 리스너가 있는 엘리먼트가 반환되고, target은 최하위 엘리먼트가 반환되는 것이다. 구분해서 사용하자.