What is Side Effect?

Rendering in React

Reactでは、関数要素のrenderingは、stateおよびpropsに基づいてUI要素を描画する動作である.
レンダリングされた成果物はUI要素であってもよく、すなわち、これらのコンポーネントは、画面上に表示されるコンテンツをJSX構文で記録している.レンダリング成果物に影響する要因にはstateとpropsが含まれます.
もう一つの言い方は(state, props) ⇒ UIです.すなわち、input(state&props)によれば、他のoutput(UI)を表す함수(function)と構造的に同一である.

上図は、左側からのデータがrenderという関数で右側JSX要素に返される例を示しています.

1-2. Side Effect

副作用は、副作用とも呼ばれ、Side Effectは日常生活で負の意味でよく用いられる.例えば、「風邪薬を飲んだら眠気がする」.
しかし、プログラミングの面ではSide Effectはマイナスではない.
関数が以下の操作(以下の参照で示す)を実行する場合、input-output以外の値を操作すると、その関数はSide Effect(부수 효과)であることを示す.
💬 コンピュータ科学の中で 関数が結果値以外の状態を変更した場合. 副作用があると言います.(wikipedia)
コードは次のとおりです.

**let count = 0**

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

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

greetWithSideEffect()という名前の関数は、名前を受け入れて挨拶を返す関数です.
ただし、この関数はinputとoutputだけではありません.実行中、操作関数の外部世界におけるcountという変数.これは関数結果値以外の状態を変化させる行為に相当するため,Side Effectといえる.
これらのSide EffectはReactの関数素子においても起こり得る.
先に説明したように、関数要素の入力はstate、props、出力はUIである.したがって、関数要素のSide Effectは、stateおよびpropsを受信してUIを描画する以外の動作といえる.
もしそうであれば、関数要素のSide Effectは렌더링이 아니고 외부 세계에 영향을 주는 어떠한 행위である.
典型的な動作には、データFetching、直接アクセスDOM(登録イベントリスナー)、サブスクリプション(ex.setInterval)が含まれます.これらはいずれも素子に必要な典型的なSide Effectである.