리액트 이벤트 핸들링

Event : 웹에서 일어나는 버튼 클릭, 메세지 입력, 스크롤 등등의 모든 행동

Handling : 다루다, 취급하다, 처리하다

 

Event Handling : 이벤트가 발생했을 때 그를 처리하는 것. 즉 버튼을 클릭했을 때 경고창을 띄워주는 것처럼. 웹에서 발생하는 사용자의 행동을 처리하는 것을 말한다. 

 

 

리액트에서의 이벤트 핸들링은 바닐라JS에서의 이벤트 핸들링과 거의 비슷하다. 

 

 

 

export default function Button({color,text, children}){

  return <button
  
  onClick={()=>{
    alert("버튼을 클릭했습니다.")
  }}

  style={{
    backgroundColor: color
  }}

  className='button'>
    {children}
  </button>
}

 

onClick 속성을 추가하고, 버튼을 클릭하면 “버튼을 클릭했습니다” 가 잘 나오는 것을 확인할 수 있다. Click 이벤트 말고도 다양한 이벤트가 제공된다.

 

클릭이벤트가 발생했을 때, 수행하고자 하는 코드가 담긴 화살표 함수를 ‘이벤트 핸들러’라고 부르기도 한다.

 

 

 

export default function Button({color,text, children}){

  const onClick = () => {
    alert("버튼을 클릭했습니다.")
  }

  return <button
  	onClick={onClick}
    
  style={{
    backgroundColor: color
  }}

  className='button'>
    {children}
  </button>
}

 

이벤트 핸들러는 화살표 함수로 직접 작성해도 되지만 위처럼 onClick 변수를 만들어서 사용할 수도 있다

 

주의점은 모든 이벤트 핸들러를 설정할때는 오로지 함수의 이름만 전달해야 한다. 소괄호는 전달하면 안 된다. 소괄호를 붙이면 함수의 호출 결과를 전달하게 된다. 

 

위의 코드에서 클릭이벤트가 발생하면 가져간 onClick 함수를 그대로 호출할 것이다. 즉 마치 콜백함수 전달과 비슷하다. 콜백함수 전달하듯 이벤트 핸들러를 설정하면 된다. 

 

 

 

 

 

[이벤트 객체]

 

모든 이벤트는 이벤트가 발생했을 때, 이벤트 핸들러를 호출하면서 이벤트 핸들러 함수의 매개변수로 이벤트 객체라는 것을 제공한다.

 

이벤트 객체를 console.log를 통해 출력해 보면 SyntheticBaseEvent라는 합성 이벤트 객체가 출력된다.  SyntheticBaseEvent는 모든 브라우저에서 동일하게 코드를 작성해도 문제가 발생하지 않도록 도와주는 고마운 통합 규격이다 ㅎ

 

이러한 합성 이벤트 객체를 사용하면 브라우저 별로 스펙이 달라서 발생하는 문제인 크로스 브라우징 이슈를 아주 간단하게 해결해 준다.