[복습]React 주요 개념정리 - Event Listener

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

주로 마우스 클릭, 오버, 키보드 누름 등에 자주 쓰인다.

 

* 참고자료

https://developer.mozilla.org/ko/docs/Web/Events

이벤트 참조 | MDN

 

addEventListener 를 통해 이벤트 리스너를 추가해보자.

 

1. 클래스형 컴포넌트에서 event lisntener 구독하기

이벤트 리스너는 어떤 이벤트 행동을 지켜보려면 DOM요소가 있어야하므로 componentDidMount()에 넣어주면된다.

 

- ref부터 잡아준다.

   this.div = React.createRef();

 

- 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);

}