[React] 이벤트 처리

이벤트 처리

 

" React element 에서 이벤트를 처리하는 방식 = DOM element 에서 이벤트를 처리하는 방식 "

 

리액트와 DOM 엘리먼트의 이벤트 처리 방식은 매우 유사하지만 몇가지 다른 점이 있다.

// html
<button onclick="handleClick()" > Click </button>

// react
<button onClick={handleClick} > Click </button>

• 소문자가 아닌 camelCase를 사용
• JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달

다른 차이점으론 false를 반환해도 기본 동작을 방지할 수 없다.

따라서, preventDefault를 명시적으로 호출해주어야 함!!

// html
<form onsubmit="console.log('Success submit!'); return false">
  <button type="submit">Submit</button>
</form>

// react

function Submit(){
   function handleSubmit(e){
      e.preventDefault();
      console.log('Success submit!');
   }
   
   return(
      <form onSubmit={handleSubmit}>
        <button type="submit">Submit</button>
      </form>
   )

}

이때, e는 합성 이벤트(synthetic Event)로 모든 브라우저에서 동일하게 이벤트를 처리하도록 도와준다.

addEventListener 함수를 호출할 필요도 없다. 대신, 위의 예시와 같이 element가 처음 렌더링될 때 리스너를 제공하기만 하면 된다.

 

홈페이지 상단 배너를 통해 이벤트 처리를 알아보도록 하자

 

상단 배너 클릭 시, 당첨되었다는 알림창이 뜨도록 하고

function handleEvent(e) {
    return alert("10% 할인 쿠폰에 당첨되었습니다!");
}

useState를 이용하여 초깃값을 true로 설정해주고

만일 닫기 버튼을 클릭하게 되면 false로 반환하여 창을 닫도록 구현한다.

const [show, setShow] = useState(true);

function handleExit() {
    setShow(false);
}

show ? (
<div onClick={handleEvent}>이 곳을 클릭해서 쿠폰을 받아가세요!
   <button onClick={handleExit}}> X </button>
</div>
) : null;

 

잘 구현된 것 같으나 닫기 버튼을 클릭하면 위와 같이 alert창과 함께 닫혀버리는 것을 확인하였다.

=> 이벤트 버블링 현상

function handleExit(e) {
    e.stopPropagation();
    setShow(false);
}

현재 이벤트가 캡처링/버블링 단계에서 더 이상 전파되지 않도록 방지하는 stopPropagation() 메서드를 이용해서 해결해줌

 

✔️stopPropagation()

: 부모 엘리먼트에게 이벤트 전달을 막아주는 함수

 

✔️preventDefault()

: 브라우저 고유의 행동을 막아주는 함수