하위 태그에 클릭 이벤트 해제 - currentTarget

html에 onClick으로 이벤트를 걸었을 때 e.target을 쓰면 하위 태그까지 모든 이벤트가 걸린다.

그에 따라 클릭 이벤트를 건 태그에만 이벤트를 적용하고 싶을 때에는 currentTarget 함수를 사용한다.

예시

const event = (e) =>{

console.log(e.target)

}

...

<div onClick={ event }>

<div>a</div>

<div>b</div>

<div>c</div>

</div>

e.target을 사용할 경우 a, b, c 를 클릭할 때 a, b, c 태그가 콘솔에 찍히게 된다

예시

const event = (e) =>{

console.log(e.currentTarget)

}

...

<div onClick={ event }>

<div>a</div>

<div>b</div>

<div>c</div>

</div>

e.currentTarget을 사용할 경우 a, b, c 를 클릭해도 이벤트를 건 태크만 반환이 된다.