TIL 210923

今日やったこと

学習反応.

EventListenerイベントリスナー

 constructor(props) {
    super(props);

    this.state = {};
    this.circle = React.createRef(null);
  }


  hoverEvent = (e) =>{     // e는 event 객체
    console.log(e.target)  // event 가 발생한 요소가 무엇인지 찾기
    console.log(this.circle.current); // e.target 과 같은 요소인지 확인

    // 색깔 바꾸기
    this.circle.current.style.background = 'yellow'
  }

  componentDidMount() {
    console.log(this.circle);
    // addEventListener를 사용하려면 이미 DOM 요소가 완성되어 있어야함 (Mount가 끝나 있어야함)
    this.circle.current.addEventListener('mouseover', this.hoverEvent) 
                            // 어떤 이벤트가 발생했을때, 어떤 행동을 할 것인가
  }
  
 componentWillUnmount() {
    // 컴포넌트가 사라지면 이벤트 리스너도 같이 사라지게 설정 (클린업)
    this.circle.current.removeEventListener('mouseover', this.hoverEvent)
  }

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

  const hoverEvent = () => {
      text.current.style.background = 'yellow';
  }

  // useEffect - 리액트 훅
  React.useEffect(() => {
      text.current.addEventListener('mouseover', hoverEvent);

      // 이벤트 리스너 지우기(컴포넌트가 사라지는 위치에서 ->  componentWillUnmount())
      return () => {
          text.current.removeEventListener('mouseover', hoverEvent);
      }
  }, []);
  return <h1 ref={text}>텍스트입니다!</h1>;
};

ルーティング

Redux Ridex

に感銘を与える

明日やること