Chapter3 - Event Listener

이벤트 리스너란?

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

이벤트 리스너는 <div onClick={}>에서처럼 엘리먼트에 직접 넣어줄 수도 있지만, 이번에는 addEventListener를 통해 추가해보자

이벤트 리스너를 추가하는 것을 구독한다라고 한다.

 

 

 

이벤트 리스너를 적용시킨 부분을 선택하고 밑에 Event Listeners를 보면 다양한 이벤트리스너의 종류들을 볼 수 있다.

컴포넌트가 사라질수도 있는데 다시 생기면 이벤트리스너도 다시 생겨난다.

지웠다 만들었다를 반복하면 한번 마우스를 올렸는데 여러번 이벤트가 되는 경우가 발생할수 있다.

그래서 컴포넌트가 사라질때에는 꼭!! 이벤트리스너를 지워줘야 한다.

 

 

 

클래스형 컴포넌트

 

1. 어떤 행동(=이벤트 발생!) 뒤에 실행할 함수 먼저 만들자

hoverEvent = (e) => {

    console.log(e.target); //여기서 e는 event객체인데 e.target은 어떤요소(가져오는)를 나타냄

    console.log(this.circle.current);

    this.circle.current.style.background = "yellow";

  };

2. 이제 addEventListener()를 이용해서 이벤트를 등록하자.

  componentDidMount() {

    console.log(this.circle);

// 돔요소가 완성이 되어있어야(즉 디드마운트가 되고나서) 이벤트리스너 사용할 수 있다.

    this.circle.current.addEventListener("mouseover", this.hoverEvent);

//첫번째 인자는 어떤이벤트 두번째 인자는 어떤 행동을 할지 넘겨주면 된다.

  }

3. 이벤트리스너 해제

  componentWillUnmount() {

    this.circle.current.removeEventListener("mouseover", this.hoverEvent); //이 과정을 클린업 이라 한다.

  }

 

 

 

 

함수형 컴포넌트

 

useEffect() 훅 사용!

 

// 첫번째 인자는 화살표 함수 즉, 렌더링 시 실행할 함수가 여기에 들어간다.

// 두번째 인자의 []! 디펜던시 어레이라한다. 여기 넣어준 값이 변하면 첫번째 인자인 콜백함수를 실행한다.

React.useEffect(( ) => {

  // 여기가 rendering 때 실행될 구문이 들어가는 부분이다.

  // componentDidMount, componentDidUpdate일 때 동작하는 부분이 여기.

  // do something ...

  return () => {

    // 여기가 clean up 부분이고

    // componentWillUnmount 때 동작하는 부분이 여기다.

    //do something ...

  };

}, []);

 

 

const Text = (props) => {   const text = React.useRef(null); //훅을 써서 초깃값을 null로 줬다. 마운트가 된 다음에는 text에 h1이 담길것이다.   const hoverEvent = () => {     text.current.style.background = "yellow";   };     React.useEffect(() => {     text.current.addEventListener("mouseover", hoverEvent);     return () => {       text.current.removeEventListener("mouseover", hoverEvent);     };   }, []);   return <h1 ref={text}>텍스트입니다!</h1>; };

이벤트 발생시 실행시킬 함수 만들기!

useEffect() 안에 addEventListener, removeEventListener 만들어주기!