📲 Effect Hook

⭐️ useEffect

前章ではside Effectを理解し,関数型素子のside Effectを理解した.ただし、これらのside Effectを関数のbody位置(render)で実行させることはできません.
前述したように、関数要素の戻り値はUI要素であり、stateとpropsが変化するたびに関数が実行されることを示しています.これは、レンダリングのたびに関数bodyの論理が実行されることを意味します.
また、レンダリングに関係のない論理は、レンダリング中に実行され、レンダリング自体に影響を与え、パフォーマンスに悪影響を及ぼす可能性があります.

function greetWithSideEffect({ name }) { // Input
  // Bad!
  **document.title = `${name}님 안녕하세요!`; // Side Effect**

  return <div>{`${name}님 안녕하세요!`}</div>; // Output
}

したがって、Reactは、このようなSide Effectを生成するための適切な場所としてuseEffect hookを提供する.
公式文書もuserEffectを"React의 순수한 함수적인 세계에서 명령적인 세계로의 탈출구로 생각하세요"と記述している.
ここで、「純粋な世界」は「レンダリング」(Input→Output)を意味し、「Effectを使用」はEffectを使用してレンダリング以外に必要なSide Effectを生成する出口である.useEffectレンダリング後にSide Effectが生成されます(例外:useLayoutEffect).これは、Effectの使用時にDOMが更新されたことを意味し、すなわち、Side Effectはレンダリングに影響を及ぼさないことを目的としている.

import { useEffect } from 'react';

function greetWithSideEffect({ name }) { // Input
  useEffect(() => {
    // Good!
    document.title = `${name}님 안녕하세요!`; // Side Effect
  }, [name]);

  return <div>{`${name}님 안녕하세요!`}</div>; // Output
}

Side Effectの後に更新された情報がスクリーンを再描画する必要がある場合は、再レンダリングします.
関数コンポーネントは、最新のステータスとpropsを反映する画面を返します.Effectを生成するタイミングについては、前述したUserEffectの2番目のパラメータ의존성 배열(Dependancy Array)によって説明するので、より詳細に説明する.

⚡️ Rendering Cycle with useEffect

useEffectは以下の形式を採用している.
検出する値を2番目のパラメータに渡す場合は、これらの値の変更時にのみ実行できます.

import { useEffect } from "react"

// 사용법
useEffect( 실행시킬 동작, [ 타이밍 ] )
document.addEventListener("타이밍", 실행시킬 동작) // 추상화 한 예시

// 매 렌더링마다 Side Effect가 실행되어야 하는 경우
useEffect(() => {
  // Side Effect
})

// Side Effect가 첫 번째 렌더링 이후 한번 실행 되고,
// 이후 특정 값의 업데이트를 감지했을 때마다 실행되어야 하는 경우
useEffect(() => {
  // Side Effect
}, [value])

// Side Effect가 첫 번째 렌더링 이후 한번 실행 되고,
// 이후 어떤 값의 업데이트도 감지하지 않도록 해야 하는 경우
useEffect(() => {
  // Side Effect
}, [])

図からさらに理解しましょう.
次の図は、useEffectを使用するレンダリングサイクルとその数を示しています.
(ソース:https://dmitripavlutin.com/react-useeffect-explanation/)
デフォルトでは、関数構成部品のレンダリングは次の順序で行われます.

の構成部品がレンダリングされます.最初のレンダリングはmountとして表示され、この構成部品がブラウザに表示されるのは初めてであることを示します.

userEffectの最初のパラメータに実行を渡す関数(コールバック).

再レンダリング(re-render)(stateまたはpropsに変更された場合)

userEffectは、2番目のパラメータの의존성 배열をチェックします.

は、아무런 값도 넘기지 않았거나のパラメータに渡される배열에 들어있는 값 중 업데이트된 것이 하나라도 있다면の第1のパラメータの関数(コールバック)を第2のパラメータ上で実行する場合に実行する.

または空の配列がない場合は、アクションは実行されません.

前述のEffectでstateまたはpropsを変更した場合は、レンダリングが再開されます.

(約...)

構成部品が不要な場合は、画面から消えます.unmountは、デバイスがブラウザの画面から消えたことを示す.