20210727

reactのhookメソッドの1つであるuserEffectは、reactクラスコンポーネントのコンポーネントDidMountやコンポーネントDidUpdate、コンポーネントWillUnmontなどと同様の役割を果たすDOM更新後の動作を設定できる副作用メソッドである.
userEffectは、実行するcallback関数と、どの値が更新されたときにcallback関数を実行するかを決定する依存項目を提供します.依存項目が指定されていない場合(空の配列:[])、最初のマウント時にのみ実行されます.

useEffect(callback: function(), dependencies: any[]);

userEffectは依存項目内部の値を更新するたびにcallback関数を実行し、userEffectは複数のコンポーネントが同時に存在する可能性があるため、依存項目に基づいて関連しないコードを分離することができる.
依存項目を頻繁に更新したり、userEffect内部で外部データにアクセスしたりするなど、メモリの漏洩を招く可能性のある操作を行うと、userEffectはコードのパフォーマンスを低下させる可能性があります.この場合、最適化を行うためには、userEffect内部でstate等(特に依存値)の更新を最大限に低減し、コールバック実行後に次のコールバック実行前にクリーンアップ(clean-up)する必要がある場合には、この操作をuserEffect return値として指定することで最適化を行うことができる.

const Function = () => {
  ...
  useEffect(() => {
    window.addEventListener('load', callback); // 페이지 로드 시 특정 동작을 실행하도록 이벤트 등록
    
    return () => {
      window.removeEventListener('load', callback); // 해당 페이지가 언로드될 경우 더이상 해당 이벤트가 필요 없으므로 이벤트 해제
    };
  }, []); // 최초에만 실행되면 되므로 dependencies를 따로 지정해주지 않음
  
  useEffect(...);
  useEffect(...);
  ...
};