TIL) eventListener

eventListener

클래스형 컴포넌트에서 eventListener 구독하기, mouseover 시에 색깔 바뀌게 하기

 

import logo
from './logo.svg';
import './App.css';
import React from "react";
import Text from "./Text";

class App extends React.Component{
  	constructor(props){
  	super(props);
	this.state = {};
  	this.circle = React.createRef(null);
	}

  	hoverEvent = (e) = > {
  	console.log(e.target); // 이 이벤트가 발생한 요소가 뭔지 보여줌
  	console.log(this.circle.current); // 우리가 ref로 잡아준 요소와 e.target이 같은지 확인해보자.두개가 같은 값이므로 this.circle.current 써도 무방
  	this.circle.current.style.background = "pink";
	}

	componentDidMount(){
  	console.log(this.circle);
  	this.circle.current.addEventListener("mouseover", this.hoverEvent); // addEventListener에 1. 어떤 이벤트, 2. 어떤 행동 할지 두가지 인자 넣어줌
	}

	componentWillUnmount() {
  	this.circle.current.removeEventListener("mouseover", this.hoverEvent); // component가 사라질 때, 이벤트리스너가 사라진다.
	}

	render() {


	return (
   	 	< div style={{width: "100vw", height:"100vh", textAlign:"center"}} >
   	 		< Text / >
   	 		< div style={{margin:"auto", width: "250px", height: "250px", background:"green", borderRadius:"250px"}} ref={this.circle} > 
              		< / div >
    		< / div >
		);
	}
}

export default App;

 

함수형 컴포넌트에서 eventListener 구독하기, mouseover 시에 색깔 바뀌게!

 

useEffect를 사용, 리액트 훅 중의 하나.

componentDidMount, componentDidUpdate, componentWillUnmount 가 모두 합쳐진 것.

 

React.useEffect(() => {} , []);  // 여기가 rendering 때 실행될 구문이 들어가는 부분. // componentDidMount, componentDidUpdate 일 때 동작하는 부분이 여기. // do something...     return () => {             // 여기가 clean up 부분. 컴포넌트의 함수선언부분 return이 아니라 useEffect 함수의 return임     // componentWillUnmount 때 동작하는 부분이 여기.     // do something...

 

동작 원리:

컴포넌트가 렌더링되면 화살표 함수를 실행한다. 실행 조건이 있는데 첫번째 화살표 함수 실행은 무조건 실행. 두번째 실행은(=rerendering) dependency array('[]') 요소 확인 후 요소에 바뀐게 있을 때만 실행이됨.

1. []에 배열이 없을 때, componentDidMount 같은 동작을 함. (리랜더링 안일어남)

2. []의 요소에 변화가 있을 때, componentDidUpdate와 같은 동작을 함. 

3. 컴포넌트가 화면에서 사라질때 동작하는걸 리턴에 넣으면 됨.

 

import React from "react";

const Text = (props) => {
const text = React.useRef(null);

const hoverEvent= () => {
    text.current.style.background = "yellow";     //text.current.style은 e.target과 같음
}

React.useEffect(() => {
    text.current.addEventListener("mouseover", hoverEvent);        //text.current에 mouseover 동작을 하는 어떤함수를 addEventListener로 달아줄거야?

    return () => {
        text.current.removeEventListener("mouseover", hoverEvent);   //return에 text.current.removeEventListener를 같은 방식으로 달아줌
    }
}, []);

return (
   <h1 ref={text}>텍스트입니다!</h1>
  )
}

export default Text;