[React] 이벤트 버블링 방지( setPropagation() )

목표

input 태그에서 이벤트 리스너를 사용하는 방법과 이벤트 버블링을 방지 방법에 대해 공부해본다.

 

input 태그 사용하기

1. 이벤트 리스너

<input onChange={()=>{실행할코드}}/>
<input onClick={()=>{실행할코드}}/>

onChange는 값이 변화할 때마다, onClick은 클릭되었을 경우 이벤트가 발생한다.

 

2. input에 입력한 값 가져오기

 1) state 설정

let [inputVal,setInputVal] =useState('');

 

2) 텍스트로 입력한 값 state에 저장

<input onChange={(e)=>{setInputVal(e.target.value)}}/>

 

이벤트 버블링 방지하기

이벤트 버블링이란?

한 요소에 이벤트가 발생하면 해당 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작하고

최상단의 부모 요소를 만날 때까지 반복되면서 핸들러가 동작하는 현상

<input onChange={(e)=>
    {setInputVal(e.target.value); 
    e.stopPropagation();}}
/>

e.stopPropagation(); 을 통해 상위 태그들로 이벤트가 전이되는 것이 막아준다.

 

이전까지 수행했던 예제에 이를 적용하면 아래와 같다.

따봉 이미지를 클릭하면 횟수만 증가하고, 상위 태그에 이벤트가 전달되지 않기 때문에

모달창이 등장하지 않게 된다.

<h4>{element}
    <span onClick={(e)=>{
        let copy=[...like]
        copy[index]=like[index]+1
        setLike(copy)
        e.stopPropagation()
        }}>👍
    </span>{like[index]}
</h4>

stopPropagation() 함수를 통해 onClick 이벤트보다 상위 태그들의 이벤트까지 전이되지 않도록 했다.

(e는 해당 Event를 뜻한다.)

 

결과

 기존에는 좋아요 버튼만 눌러도 위와같이 하단에 모달창이 등장했었다.

 

하지만 이벤트 버블링을 차단한 이후로는 좋아요 버튼을 눌러도 하단에 모달창이 뜨지 않게 되었다.

 

 

출처 : 코딩애플_React 기초부터 쇼핑몰 프로젝트까지!

https://codingapple.com/course/react-basic/

React 리액트 기초부터 쇼핑몰 프로젝트까지! - 코딩애플 온라인 강좌