[REACT] 이벤트 리스너 등록 / mouseover이벤트

2021.06.27 - [WEB/REACT] - [REACT] 클래스형 컴포넌트에서 state관리 - setState /네모를 하나 추가 하나빼기 화면 만들기

 

 

네모근처에 마우스 올리면 백그라운드 색상 바뀌게 하기

 

(1) ref설정

만들어서 연결해준다.

 

 

(2) 이벤트 함수 설정

이벤트의 타겟에다가 어떤 코드를 실행할지

 

 

(3) 이벤트 리스너 구독과 해제

 

DOM객체가 다 만들어지고 나서 이벤트 리스너 등록하고

DOM이 사라지면 해제하도록 함

 

---

 

 

 

 

App.js

import React from "react";
import Nemo from "./Nemo";
class App extends React.Component {
  constructor(props) {
    super(props);
 
    this.state = {
      
    };
    this.div = React.createRef();
  }
 
  hoverEvent = (e)=>{
    e.target.style.background = "#eee";
  }
  // DOM이 다 만들어지고 나서 이벤트리스너 등록
  componentDidMount() {
    this.div.current.addEventListener("mouseover", this.hoverEvent);
  }
 
  // DOM이 없어지면 구독 해제
  componentWillUnmount(){
    this.div.current.removeEventListener("mouseover", this.hoverEvent);
  }
 
  render() {
  
 
    return (
      <div className="App" ref={this.div}>
        <Nemo/>
      </div>
    );
  }
}
 
export default App;