[React] 이벤트 핸들링 (event handling)

이번 글은 리액트에서 이벤트 핸들링에 대한 글이다.

 

---

 

[ Event Handling ]

Event는 버튼 클릭, 메세지 입력, 스크롤 과 같이 웹 내부에서 발생하는 사용자 행동이다.

Event Handling는 웹에서 이벤트를 발생 시 처리하는 것으로 버튼 클릭 시 경고창이 노출되는 등의 과정이다.

 

onClick = {onClickButton}는 이벤트를 처리하는 부분으로 이벤트 핸들러다.

=> 이벤트에 해당하는 클릭(onClick)이 실행되면 onClickButton과 같은 함수가 실행된다. 

const Button = ({text, color,children}) => {
    const onClickButton = () => {
        console.log(text);
    };
  return (
  <button 
  onClick = {onClickButton}
  style={{ color: color }}>{text}{children}</button>

  );
};

export default Button;

결과값 : 누를 때마다 추가

 

 

---

 

 

[ 이벤트 객체 - SyntheticBace Event ]

react에서 발생하는 모든 클릭, 마우스 엔터와 같은 이벤트들은 이벤트 핸들러 함수를 호출한다.

이때 호출된 이벤트 핸들러 함수의 매개변수로 이벤트 객체를 제공한다.

 

 

* 합성 이벤트 (SyntheticBace Event) : 모든 웹 브라우저의 이벤트 객체를 하나로 통일한 형태

=> 웹 브라우저는 브라우저 별 스펙이 달라 발생하는 문제인 Cross Browing Issue가 있는데 합성이벤트가 통합 규격을 사용하여 이를 해결해준다.

const Button = ({text, color,children}) => {
    const onClickButton = (e) => {
        console.log(e);
        console.log(text);
    };
  return (
  <button 
  onClick = {onClickButton}
  style={{ color: color }}>{text}{children}</button>

  );
};

export default Button;

결과값 : SyntheticBace Event

 

 

---