React - Event Listener

Jinsung·2021년 9월 22일

React

목록 보기

6/9

1. 🧐이벤트 리스너란

이벤트 리스너는 `사용자가 어떠한 행동(이벤트)을 하는지 아닌지 지켜보다 알려주는 것입니다. ex) 마우스 클릭 , 마우스 오버, 키보드 조작 등

2. ✅클래스 컴포넌트의 이벤트 리스너

DOM 요소가 있어야 이벤트 발생을 지켜볼 수 있음으로 componentDidMount()에 이벤트 리스너를 넣어줍니다.

1) 🎯class component 작성

import React from "react";
import Text from "./Text";

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

    this.state = {};
    this.circle = React.createRef(null);
  }

  componentDidMount(){
    console.log(this.circle);
  }

  componentWillUnmount() {

  }

  render() {
    return (
      <div>
        <Text/>
        <div ref={this.circle}></div>
      </div>
    );
  }
}
export default App;

2) 🎯이벤트 함수 만들기

hoverEvent = (e) => {
    // 콘솔로 이 이벤트가 누구에게서 일어났는 지 확인
    console.log(e.target);
    // ref랑 같은 녀석인 지 확인
    console.log(this.circle.current);

    this.circle.current.style.background = "yellow";
  }

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

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

3) 🎯이벤트 제거

이벤트 컴포넌트가 사라지면 event를 제거해야 합니다 이벤트가 실행되지는 않지만 등록된 이벤트는 남아있기 때문입니다. 이렇게 제거하는 작업을 clean up이라고 합니다.

componentWillUnmount() {
    this.circle.current.removeEventListener("mouseover", this.hoverEvent);
  }

3. ✅함수형 컴포넌트의 이벤트 리스너

함수형 컴포넌트에서는 componentDidMount() 역할을 하는 useEffect()훅을 사용하여 이벤트 리스너를 위치시킵니다.

1) 🎯useEffect()

useEffect()는 리액트 훅입니다. 라이플 사이클 함수중 componentDidMount와 componentDidUpdate, componentWillUnmount를 합쳐둔거라 생각하하면 쉽게 이해할 수 있습니다.

 React.useEffect(() => {
   // rendering 시 실행 구문이 들어가는 부분.
   // componentDidMount, componentDidUpdate일 때 동작하는 부분
   // do something...
   retrun () => {
     // clean up 부분
     // componentWillUnmount 때 동작하는 부분
     // do something ...
   };
 }, []);

2) 🎯이벤트 함수 만들기

 const hoverEvent = (e) => {
   // 이벤트가 누구에게서 일어나는지 확인
   console.log(e.target);
   // ref와 같은 요소에서 발생했는지 확인
   console.log(text.current);
   
   text.current.style.background = 'yellow';
 }

3) 🎯이벤트 등록

 React.useEffect(()=> {
   // rendering 때 실행는 부분
   // componentDidMount, componentDidUpdate일 때 동작 부분
   text.current.addEventLisener('mouseover', hoverEvent);
   
   return () => {
     // clean up부분
     // componentWillUnmount 동작부분
     // do something
   };
 },[text]); // 두번째인자 []! 디펜던시 array는 여기 넣어준 값이 변하면 
//첫번째 인자인 콜백함수를 실행합니다.

4) 🎯이벤트 제거

컴포넌트가 사라질때 이벤트를 제거해 줍니다.
useEffect에서 clean up은 return 구문에서!

  React.useEffect(()=>{
    text.current.addEventListener('mouseover', hoverEvnet);
    
    return () => {
      text.current.removeEventListener('mouseover', hoverEvent);
    }
  }