Event Listener - 마우스 오버 이벤트

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

이벤트 참조 | MDN

이벤트를 활용하여 더 화려한 사이트를 만들 수 있다.

id를 주고 JS에서 document에서 객체를 가져와서

addEventListener과 그 뒤에 함수를 넣어준다.

리액트스럽게 ref잡아서 똑같이 해줄 수 있음.

 

컴포넌트 사라지기전에 이벤트 리스너 구독 해제필요!!

해제는 componentDidMount에서 할 수 있음

 

EventListener사용해서 화면에 마우스 올리면 색 변하게하기

1. app이라는 div에 ref를 먼저 잡아준다.

그리고 뷰에 연결

2. addEventListener준비

- 어떤 이벤트에 걸지?

- 어떤 행동을 해줄건지 함수

함수를 먼저 만들어본다.

3. eventlistener등록

마우스를 올리고 콘솔을 확인하면 event객체 중 target만 찍었을때 app이라는 div가 잘 잡혀온 것을 볼 수 있다. 

4. 그럼 이제 색을 바꿔줘보자.

event listener탭에서 이벤트가 잘 걸렸는지 확인 할 수 있다.

 

순서 정리

1. ref잡아주기 (돔에 접근을 해야하니)

2. 마우스오버 이벤트가 일어났을때에 어떤 거를 해주겠다 함수생성

3. componentDidMount 등록 

4. 컴포넌트가 사라질때 쓸데없는 이벤트 리스너의 유지를 방지하기위해 componentWillUnMount에서 구독해지