3주차 - Event Listener

1) 이벤트 리스너(Event Listener)이란?

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

대표적으로는 마우스 클릭, 터치, 마우스 오버, 키보드 누름 등이 자주 쓰여요!

 

(더 많은 내용은 아래 사이트 참고)

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

이벤트 참조 | MDN

---

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

 

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

: 이벤트 리스너는 어디에 위치해야할까요?

클릭을 하건, 마우스를 올리건 DOM 요소가 있어야 이벤트가 발생하는 지 지켜볼 수 있겠죠?

→ componentDidMount()에 넣어주면 됩니다.

 

- 어떤 행동(=이벤트 발생) 뒤에 실행 할 함수를 만들어 줍니다.

hoverEvent = (e) => {
    // 콘솔로 이 이벤트가 누구에게서 일어났는 지 확인할 수 있습니다.
    console.log(e.target);
    // ref랑 같은 녀석인 지 확인해봐요!
    console.log(this.circle.current);

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

 

- addEventListener()를 이용해서 이벤트를 등록합니다.

componentDidMount(){
    // 리액트 요소가 잘 잡혔나 확인해봅시다!
    console.log(this.circle);

    // 마우스를 올렸을 때, 이벤트가 일어나는 지 확인해봅시다.
    this.circle.current.addEventListener("mouseover", this.hoverEvent);
  }

+ 개발자 도구를 통해서도 확인 할 수 있습니다.

 

- 이벤트는 꼭 컴포넌트가 사라지면 지워주세요!

: 이 과정을 clean up 이라고 불러요.

개발자 도구에서 확인했듯, 이벤트는 한번 등록되면 계속 남아있거든요!

그런데 컴포넌트가 사라지면요? 이벤트가 실행되지는 않겠지만, 남아는 있을거예요.

그러니 깨끗하게 정돈해주는 과정이 필요합니다! 그게 clean up이고요!

componentWillUnmount() {
    this.circle.current.removeEventListener("mouseover", this.hoverEvent);
  }

---

3) 함수형 컴포넌트에서 event listener 구독하기

: 이벤트 리스너는 어디에 위치해야할까요?

클릭을 하건, 마우스를 올리건 DOM 요소가 있어야 이벤트가 발생하는 지 지켜볼 수 있겠죠?

→ 그럼 함수형 컴포넌트에서는 componentDidMount() 함수가 없기 때문에

componentDidMount() 역할을 하는 친구를 가져다 써야겠네요!

→ useEffect() 훅을 써봅시다!

 

- useRffect()

: useEffect()는 리액트 훅이에요.

라이프 사이클 함수 중 componentDidMount와 componentDidUpdate, componentWillUnmount를

합쳐둔 거라고 생각하면 금방 이해할 수 있어요!

  // 첫번째 인자는 익숙하죠! 화살표 함수! 넵, 렌더링 시 실행할 함수가 여기에 들어갑니다.
  // 두번째 인자의 []! 디펜던시 어레이라고 불러요. 여기 넣어준 값이 변하면 첫번째 인자인 콜백함수를 실행합니다.
  React.useEffect(() => {
    // 여기가 rendering 때 실행될 구문이 들어가는 부분입니다.
    // componentDidMount, componentDidUpdate일 때 동작하는 부분이 여기예요.
    // do something ...

    return () => {
        // 여기가 clean up 부분입니다.
        // componentWillUnmount 때 동작하는 부분이 여기예요.
      //do something ...
    };
  }, []);

 

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

const hoverEvent = (e) => {
    // 콘솔로 이 이벤트가 누구에게서 일어났는 지 확인할 수 있습니다.
    console.log(e.target);
    // ref랑 같은 녀석인 지 확인해봐요!
    console.log(text.current);

    text.current.style.background = "yellow";
  };

 

- 이제 addEventListener()를 이용해서 이벤트를 등록합니다.

// 첫번째 인자는 익숙하죠! 화살표 함수! 넵, 렌더링 시 실행할 함수가 여기에 들어갑니다.
  // 두번째 인자의 []! 디펜던시 어레이라고 불러요. 여기 넣어준 값이 변하면 첫번째 인자인 콜백함수를 실행합니다.
  React.useEffect(() => {
    // 여기가 rendering 때 실행될 구문이 들어가는 부분입니다.
    // componentDidMount, componentDidUpdate일 때 동작하는 부분이 여기예요.
    text.current.addEventListener("mouseover", hoverEvent);
    
    return () => {
        // 여기가 clean up 부분입니다.
        // componentWillUnmount 때 동작하는 부분이 여기예요.
        //do something ...
    };
  }, [text]);

 

- 이벤트는 꼭 컴포넌트가 사라지면 지워주세요!

: useEffect에서 clean up은 return 구문을 이용해서 합니다!

// 첫번째 인자는 익숙하죠! 화살표 함수! 넵, 렌더링 시 실행할 함수가 여기에 들어갑니다.
  // 두번째 인자의 []! 디펜던시 어레이라고 불러요. 여기 넣어준 값이 변하면 첫번째 인자인 콜백함수를 실행합니다.
  React.useEffect(() => {
    // 여기가 rendering 때 실행될 구문이 들어가는 부분입니다.
    // componentDidMount, componentDidUpdate일 때 동작하는 부분이 여기예요.
    text.current.addEventListener("mouseover", hoverEvent);
    
    return () => {
        // 여기가 clean up 부분입니다.
        // componentWillUnmount 때 동작하는 부분이 여기예요.
        text.current.removeEventListener("mouseover", hoverEvent);
    };
  }, [text]);