Clean up Effect

1.Cleanup関数

ページを離れると、イベントリスナーは不要になる可能性があります.この場合はEffectを整理します毎回Effectのクリーンアップを開始できるように、論理をUSEffectに整理するアクションをUSEffectで定義できます.
Cleanup関数は、ユーザEffect()のreturn関数です.

🙋‍♀️ 元の関数にはreturnがあるのではないでしょうか。return関数は何ですか?

最初の例は次のとおりです.

useEffect(() => {
  function handleScroll() {
    console.log(window.scrollY)
  }
  document.addEventListener("scroll", handleScroll)
  
 return () => {
    document.removeEventLisnter("scroll", handleScroll)
  }
}, [])

userEffect関数にreturn関数があることがわかります.userEffect関数にreturn関数を追加することでcleanup関数を使用できます.

return () => {}; //cleanup 함수는 이렇게 쓸 수 있습니다. 

ユーザーが現在のページから別のページに移動したときにuserEffectを実行しないことを確認します.

🙋̴̴̴̴̴̴̴̴̴̴̴̴̴̴̴̴\820

第2の例では、

useEffect(() => {
	console.log("effect");
    
    return () => {
    	console.log("cleanup effect");
    };
});

1.最初にページをレンダリングしたとき（マウント時）

consoleはuserefect関数のconsoleのみを撮影します.

2.state値を変更する場合（たとえば、ボタンをクリック）

consoleはまずcleanup関数のconsoleを撮影し、useEffect関数のconsoleを撮影します.
userEffectを実行する前にcleanup関数を実行し、userEffect関数を実行します.
stateを変更すると、
cleanup関数->userEffect関数を実行このループ.

3.別のページに移動してアンインストールする場合

cleanup関数は1回のみ実行され、既存の斑点関数は実行されません.
**注意事項
構成部品の作成と消去時にのみクリーンアップEffectが実行されるわけではありません.次のEffectが発生する前に必ず整理する前にEffectの影響を覚えておいてください🤩