[React] useEffect

🚶🏻‍♂️ Rendering in React

Reactにおける関数コンポーネントのレンダリングとは、UI要素を、state、propsに基づいて描画する動作を指す.レンダリングの結果はUI要素と言えます.つまり、画面にJSX構文で何が現れるかを記録します.レンダリング結果に影響する要因はstateとpropsです.
もう1つの言い方は(state,props)=UIです.すなわち,入力(state&props)によれば,他の出力(UI)を表す関数(function)と構造的に同一である.

左側からのデータはrenderという関数で右側JSX要素の例に戻ります.

🚶🏻‍♀️ side Effect

副作用、副作用、副作用とも呼ばれ、日常生活では副作用は負の意味としてよく使われていますが、プログラミングでは負の意味だけではありません.
計算機科学では,関数は結果値以外の状態を変化させる際に副作用がある.(wikipedia)

let count = 0

function greetWithSideEffect(name) { // Input
	count = count + 1 // Side Effect!

	return `${name}님 안녕하세요!` // Output
}

greetWithSideEffect()は、名前を受け入れて挨拶文を返す関数です.
この関数はinputとoutputだけが存在する関数ではありません.実行中、サードパーティのcountという変数を操作します.これは関数結果値以外の状態を変化させる行為であるためsideEffectと呼ぶことができる.
このようなことは関数素子にも起こり得る.すなわち、関数要素のsideEffectはレンダリングではなく、外部世界の任意の動作に影響します.
代表的な行動は、データFetching、DOMダイレクトアクセス(ex.Event Listener登録)、サブスクリプション(ex.SetInterval)などである.これらはいずれも素子に不可欠な代表的なsideEffectである.

🚶🏻 useEffect

前述した関数要素の戻り値はUI要素であり,state,propsが変化するたびに関数が実行される.malanderingではbodyの論理が実行される(一度管理されてもよいし、管理され続けてもよい).レンダリングに関係のない論理は、レンダリング中に実行されるため、レンダリング自体に影響し、パフォーマンスに悪影響を及ぼします.

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

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

Reactは、このような副作用を生じる適切な場所として、UseEffect hookを提供する.
公式文書では「reactの純粋な関数的な世界から命令的な世界への道と見なしている」と説明していますが、何を言っているのか分かりません.
ここで、「純粋な世界」とはlandering(input->output)を指し、landering以外に引き起こすべきside Effectの出口としてuseEffectを用いる.
useEffectはsideEffectをマウントした後に発生します(例外はuseLayoutEffectです).これは、useEffectの実行時にDOMが更新されたことを意味し、言い換えればside Effectはレンダリングに影響を及ぼさないように設計されている.

import { useEffect } from 'react';

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

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

sideEffectの後に更新された情報がスクリーン(state,propsの更新)を再描画する必要がある場合は、再レンダリングされます.
関数コンポーネントは、最新のstateとpropsを反映し、画面に送信します.Effectを引き起こすタイミングは、useffectの2番目のパラメータ「依存配列」(Dependency 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
}, [])

上記のコードを図に示します.

::関数構成部品のレンダー
1.エレメントがレンダリングされると、最初に実行されたレンダリングはmountとして表示され、そのエレメントがブラウザに初めて表示されることを示します.
2.userEffectの最初のパラメータに渡される関数(コールバック)を実行します.
3.再有効化(stateまたはpropsが変更された場合)
4.userEffectは、2番目のパラメータの依存配列をチェックします.

4-1. 2番目のパラメータに値が渡されていない場合、または/パラメータの配列に更新された値が渡されていない場合、1番目のパラメータに渡される関数(コールバック)が実行されます.

4-2. 一つもなかったり、空の配列だったりすると、何も起こりません.

前述のEffectでstateまたはpropsが変更された場合、再登録されます.

構成部品が不要な場合は、画面から消えます.コンポーネントはunmountとして表示され、ブラウザの画面から消えたことを示します.