스파르타 코딩클럽 - 리액트 2주차(10)

1. 이벤트 리스너란?

1-1. 이벤트 리스너란?

이벤트 리스너는 사용자가 어떤 행동(=이벤트)을 하는 지 아닌 지 지켜보다가 알려주는 것이다. 대표적으로는 마우스 클릭, 터치, 마우스 오버, 키보드 누름 등이 자주 쓰인다.
공식문서(링크텍스트)

(1). ref부터 잡는다!

• App.js

constructor(props) {
    super(props);

    this.state = {
      count: 3, // 숫자넣기!
    };

    // div에 ref를 먼저 잡아줍시다.
    this.div = React.createRef();
  }

...

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

(2). addEventListener()를 이용해서 이벤트를 등록한다.

• App.js

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

(3). 이벤트는 꼭 컴포넌트가 사리지면 지워준다!

• App.js

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