React Event Listener

React Event Listener

- 이벤트 리스너는 사용자가 어떤 행동(=이벤트)을 하는 지 아닌 지 지켜보다가 알려주는 것.

- 대표적으로는 마우스 클릭, 터치, 마우스 오버, 키보드 누름 등이 자주 쓰인다.

- 리액트는 컴포넌트가 실행되고 제거되기 때문에 리스너 또한 제거되기 전 반드시 해제해 주어야 한다.

- 아래의 페이지에서 이벤트 리스너의 종류를 참고하자.

이벤트 참조 | MDN

 

예시

- 이벤트 리스너는 <div onClick={}>에서처럼 엘리먼트에 직접 넣어줄 수도 있다.

- 이곳에서는 addEventListener를 통해 추가해보는 것이다.

 

이벤트 리스너의 위치

- 클릭을 하건, 마우스를 올리건 DOM 요소가 있어야 이벤트가 발생하는 지 볼 수 있다

 → componentDidMount()에 삽입

 

1. App.js에 ref 생성

constructor(props) {
    super(props);

    this.state = {
      count: 3, 
    };

    // div에 ref를 생성
    this.div = React.createRef();
  }

...

	return (
      <div className="App" ref={this.div}>
        <Nemo/>
      </div>
    );

 

2. App.js에 addEventListener()를 이용해서 이벤트를 등록

hoverEvent = (e) => {
    // 콘솔로 이 이벤트가 누구에게서 일어났는 지 확인
    console.log(e.target);

    if(e.target.className === 'app'){
      // 이벤트의 본인의 배경 색을 변경
      e.target.style.background = "#eee";
    }
  }

  componentDidMount() {
    // 리액트 요소가 잘 잡혔나 확인
    console.log(this.div);

    // 마우스를 올렸을 때, 이벤트가 일어나는 지 확인
    this.div.current.addEventListener("mouseover", this.hoverEvent);
  }

componentWillUnmount() {
    // 컴포넌트가 사라질 때 이벤트를 지워줌.
    this.div.current.removeEventListener("mouseover", this.hoverEvent);
  }

 

개발자도구에서 확인할 수 있다.