関数コンポーネントのEventListener

872 ワード
React テキストリンク
ライフサイクルはクラスコンポーネントでのみ使用できます.
関数型構成部品は、既存のクラス構成部品で使用されている構成部品DidMount、構成部品DidUpdate、および構成部品WillUnmountの機能の代わりにUseEffectを使用します.
// 첫번째 인자는 익숙하죠! 화살표 함수! 넵, 렌더링 시 실행할 함수가 여기에 들어갑니다.
  // 두번째 인자의 []! 디펜던시 어레이라고 불러요. 여기 넣어준 값이 변하면 첫번째 인자인 콜백함수를 실행합니다.
  React.useEffect(() => {
    // 여기가 rendering 때 실행될 구문이 들어가는 부분입니다.
    // componentDidMount, componentDidUpdate일 때 동작하는 부분이 여기예요.
    text.current.addEventListener("mouseover", hoverEvent);
    
    return () => {
        // 여기가 clean up 부분입니다.
        // componentWillUnmount 때 동작하는 부분이 여기예요.
        //do something ...
    };
  }, [text]);
EventListenerを使用する場合は、UserEffect Hookを使用してイベントを有効にします.
Eventは登録されるとずっと存在するので、削除する必要があります.

useEffect hook returnでイベントをクリア!!

[JavaScript]イベントループ(Event Loop)
Conditional Rendering(&,3項演算子,Optional Chaining)