Event Listener

이벤트 리스너란?

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

예를들어, 마우스 클릭, 터치, 마우스 오버, 키보드 누름 등에 자주 쓰인다.

 

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

이벤트 참조 | MDN

공식문서는 당장 사용하지 않더라도 시간을 만들어서 꼭 한번씩 훑어보자!

 

이번, 이벤트 리스너는 "addEventListener" 를 통해 추가를 해보자

※ 이벤트 리스너는 <div onClick={} > 처럼 엘리먼트에 직접 넣는 방법도 가능하다!

 

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

이벤트 리스너의 위치는 어떠한 행동이 이루어지는지 지켜보려면 DOM요소가 있어야 가능하므로 

" componentDidMount() " 에 넣어주면된다!

 

그렇게 하기위해서는 ref를 연결줘야한다!

 

ref 를 연결해주고 DOM요소에서 이벤트가 발생하는지 지켜볼 수 있도록 해준다.

그다음 componentDidMount() 이벤트 함수를 만들어보자. 

componentDidMount() { // 리액트 요소가 잘 잡혔나 확인 console.log(this.div); // 마우스를 올렸을 때, 이벤트가 일어나는 지 확인 this.div.current.addEventListener("mouseover", this.hoverEvent);

마지막으로, 이벤트는 컴포넌트가 사라지면 지워줘야한다. 

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