Event Listener

이벤트 리스너?

• 이벤트 리스너는 사용자가 어떤 행동(=이벤트)을 하는지 아닌지 지켜보다 알려주는 것이다.
• 대표적으로 마우스 클릭, 터치, 마우스 오버, 키보드 누름 등이 쓰인다.
• 여기를 클릭해서 이벤트 리스너가 무엇이 있는지 확인해보자!
• <div onClick={}> 처럼 엘리먼트에 직접 이벤트를 넣어줄 수도 있지만, 컴포넌트가 Mount된 후에 addEventListener 를 통해서 추가할 수도 있다.

주의사항!

• React에서 window나 document에 addEventListener를 통해 이벤트를 추가할 때, 그냥 사용하게 되면 렌더링 시점이 구분이 되지 않기 때문에 에러가 난다. useEffect를 이용해서 최초 로드 시에 이벤트를 추가해주면 이벤트 감지가 시작되어 에러를 일으키지 않는다.
• addEventListener를 통해 이벤트를 등록하고 난 뒤 이벤트 등록을 해제해야 한다!
  그렇지 않으면 예를들어 mouseover 혹은 scroll 이벤트의 경우 계속해서 이벤트를 감지하기 때문에 성능 저하를 일으킬 수 있다. 그러므로 컴포넌트가 언마운트 될 때 꼭 이벤트 등록을 해제해주어야 한다.

---

이벤트 객체

• 리액트 요소를 클릭하는 이벤트가 발생 했을 때, 실행되는 함수에 인자를 e로 넣고 e, e.target을 출력해보자.

import React from "react";

const App = () => {

  return (
    <div className="App">
      <input style ={{width: '200px', height: '200px', fontSize: '30px'}} 
      placeholder="Duckgugong" 
      onClick={(e)=>{
        console.log(e);
        console.log(e.target);
        console.log(e.target.value);
      }} 
      />
    </div>
  );

}

export default App;

e

• 이벤트 함수에 전달되는 파라미터인 e는 이벤트 객체를 나타낸다.

e.target

• 이벤트가 발생한 태그를 나타낸다.

onClick={()=>{add_count()}}

---

이벤트 리스너 사용법

• document에서 getElementById와 같은 것을 이용하여 한 객체를 가져온 다음, addEventListener 함수를 이용해서 이벤트를 달아주면 된다.
• 리액트에서는 ref를 사용해서 리액트 요소를 가져와서 addEventListener 함수를 달아줄 수 있다.

addEventListener()

• 컴포넌트가 Mount 되었을 때 addEventListener 함수를 한번만 등록해주면 된다.
• addEventListener 함수의 파라미터는 이벤트와 이벤트가 발생했을 때 실행 될 함수를 적어주면 된다.

[리액트 요소].addEventListener("[이벤트]", [이벤트가 발생했을 때 실행될 함수])

• 예를 들어, mouseover라는 이벤트가 발생했을 때 hoverEvent라는 함수가 실행되도록 하려면 아래처럼 코드를 작성하면 된다.

[리액트요소].current.addEventListener("mouseover", this.hoverEvent)

 

removeEventListener()

• 만약, 컴포넌트가 Unmount 되었다면 반드시 removeEventListener 함수를 사용해서 리액트 요소에 등록했던 이벤트 리스너를 제거해야한다.

[리액트 요소].removeEventListener("[이벤트]", [이벤트가 발생했을 때 실행될 함수])

• 예를 들어, mouseover라는 이벤트가 발생했을 때 hoverEvent라는 함수가 실행되었다면, 이 이벤트 리스너를 제거하려면 아래처럼 코드를 작성하면 된다.

[리액트요소].current.removeEventListener("mouseover", this.hoverEvent)

---

Example

• input box에 마우스를 올리면 mouseover 이벤트가 발생하고, 이벤트 객체, 이벤트가 발생한 태그, input box에 써 있는 값을 콘솔에 출력하는 함수 hoverEvent가 실행 되도록 해보자.

클래스형 컴포넌트

import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);

    this.test = React.createRef();
  }


  hoverEvent = (e) =>{
    console.log(e);
    console.log(e.target);
    console.log(e.target.value);
  }
  // 컴포넌트가 Mount된 후 이벤트 리스너 등록
  componentDidMount(){
    this.test.current.addEventListener("mouseover", this.hoverEvent)
  }
  //컴포넌트가 Unmount된 후 이벤트 리스너 제거
  componentWillUnmount(){
    this.test.current.removeEventListener("mouseover", this.hoverEvent)
  }

  render() {
    return (
      <div className="App">
        <input style ={{width: '200px', height: '200px', fontSize: '30px'}} placeholder="Duckgugong" ref={this.test}/>
      </div>
    );
  }
}

export default App;

함수형 컴포넌트

import React from "react";

const App = () => {
  const test = React.useRef();

  const hoverEvent = (e) => {
    console.log(e);
    console.log(e.target);
    console.log(e.target.value);
  }

  React.useEffect(() => {
    // 컴포넌트가 Mount된 후에 이벤트 리스너 등록
    test.current.addEventListener("mouseover", hoverEvent);
    return () => {
      // 컴포넌트가 Unmount된 후 이벤트 리스너 제거
      test.current.removeEventListener("mouseover", hoverEvent);
    }
  }, []);

  return (
    <div className="App">
      <input style ={{width: '200px', height: '200px', fontSize: '30px'}} placeholder="Duckgugong" ref={test} />
    </div>
  );

}

export default App;