[React] Side Effect/useEffect/Clean up Effect

むしろ曲がらない

Side Effectとは?

説明を聞いた瞬間に紛らわしくなった
上の話はどういう意味ですか.必ずブログを作るということです.
気ままなブログ
さあ、本題に入ります.side effectとは、関数の実行時に、関数の外部に存在する値や状態などの動作を変更することを意味する.そう言えば分かる人はコードの天才だろう.
もちろん、私は天才ではないので、一緒に書くつもりですが、、、
たとえば、関数でグローバル変数の値を変更したり、関数の外部にあるボタンのテキストを変更したりします.파일을 쓰거나, 쿠키 저장, 네트워크를 통해 데이터를 송신하는 것などです.
より詳細には、スクリーン上でレンダリングした後、非同期処理が必要な副作用をsidefectと呼ぶ.典型的な例として、外部APIを呼び出してデータをインポートする場合は、まず画面でレンダリング可能なコンテンツをレンダリングし、その後、実際のデータを非同期でインポートすることをお勧めします.なぜなら、第1のレンダリングを直ちに行うことによって、連動APIは、応答が遅延したり、応答がない場合に影響を最小限に抑えることができ、これはユーザ体験の面で有利であるからである.

ReactにおけるSide Effect処理

function profile () {
	const message = `{name}님 환영합니다 !`; // 함수의 반환값을 생성한다.
    
  	// Bad
    document.title = `{name}의 개인정보`; // 함수 외부와 상호작용하는 Side Effec 코드
  	return <div>{message}</div>
}
  

上記のコードは、関数構成部品の実行と生成結果に関係のないドキュメントです.titleを変更しています.これらのコードは、ウィジェットを開発する際には問題ありませんが、異なる開発者が協力して大規模なプログラムを開発する場合、실행상태를 예측하기 힘들게 한다고 한다.ファイルの場合もしtitleが今のように楽な状態ではなく、重いタスクを実行するコードだったら?컴포넌트가 렌더링 될 때마다 프로그램을 지연시키게 될 것이다.しかし、ここでreactは親切にこれらの仕事を助けてくれた友达を連れてきました.
useEffect..!
さっそく説明を始めました

useEffectとは?

先ほどBadと書かれた注釈付きの文USEffectを使用すると、副作用操作をより容易に行うことができます.副作用コードはuseEffectで登録できます!!!
Reactは、適切な時間に副作用を実行することができる.この処理は、関数要素をすばやくレンダリングし、プログラムを複雑化させる副作用領域を関数から分離するのに役立ちます.

userEffectを用いるSide Effect処理

を行う.

function UserProfile({ name }) {
  const message = `${name}님 환영합니다!`;

  //Side-Effect 코드를 UseEffect로 분리
  useEffect(() => {
    document.title = `${name}의 개인정보`; 
  }, [name]);
  return <div>{message}</div>;
}

このように使用すると,他の開発者が見ても,素子に副作用が含まれていることがわかる.

注目点の分離

effectは私がしなければならない動作によって分けたほうがいいです.
1つの使用効果に使えば、メンテナンス面で自分の目を閉じる現象が発生する可能性があります.
ex)データ取得
一度にuserEffect(()=>{},[]に配置できますが、プロファイル、画像、コメントなど複数のfetchを使用すると、後でプロファイルとコメントが混同されます.したがって、複数のuseEffectに分離する必要がある.

Clear up Effectとは?

いつものように簡単に言えば….うん.
useEffectの後続処理を担当します.
これはUSEEffectでreturnしたときに実行されます構成部品をインストールするときにaddEventListenerでイベントを追加した場合は、構成部品をアンインストールするときにイベントを削除する必要があります.
削除しなければ、簡単に撮影できるconsole.logでも、100万、500万、1000万のユーザーのうちconsole.logがいると、非常に重くなり、よくレンダリングされ、速度が著しく低下しているのが見えます.
メモリリーク
たとえば、スクロールイベントを取得するために関数を呼び出すとします.
このページを離れると、このスクロールイベントにはこのイベントリスナーは必要ありません.Clean up Effectを使用する例を作成します.

useEffect(() => {
  function handleScroll() {
    console.log(window.scrollY)
  }

  document.addEventListener("scroll", handleScroll)
  return () => {
    document.removeEventLisnter("scroll", handleScroll)
  }
}, [])

コンポーネントの作成と消去時にcleanup効果を実行するだけではないことに注意してください.次の効果が出る前に、必ず前の効果の影響を整理しておきましょう.