React #15

Side Effect

コンピュータ科学では、関数が結果値以外の状態を変化させると、副作用(Side Effect)-Wiki_ko
副作用だとよく聞こえませんが.
ここが決まっているとは限らない

let foo = 'hello';

function bar() {
  foo = 'world';
}

bar(); // bar는 Side Effect를 발생

bar()がfooに変更されたので
※純粋関数(Pure Function)
関数の入力のみが関数結果に影響する関数
入力された値を変更しない

Reactの関数構成部品

デフォルトでは、入力はpropsで、出力はJSX Elementの純関数です.
実際のアプリケーションではAJAXリクエストや外部APIを使用することがよくあります
=Reactの場合、AJAXリクエストまたは外部APIを使用

全側EFFECT

Effect Hook

useEffect

デバイス内でSide effectを実行できるHookuseEffect(함수, [비교할 값])に似ています
関数内で副作用を起こせばいいのです

useEffectを実行するタイミング

[비교할 값]がなければ
新しい構成部品をレンダリングするたびにEffect Hookが実行されます

構成部品を作成すると、

が画面上で初めてレンダリング(表示)されます.

コンポーネントに新しい支柱があり、

をレンダリングします.

要素の状態が変化し、

がレンダリングされる.[비교할 값]があれば
上記条件+24579142が変化すると、Effect Hookが動作する
注意事項
トップレベルの応答関数でのみHookを呼び出す
※[비교할 값]が[비교할 값]の場合?[]の

構成部品を作成すると、

が画面上で初めてレンダリング(表示)されます.

コンポーネントに新しい支柱があり、

をレンダリングします.

要素の状態が変化し、

がレンダリングされる.
の中

構成部品を作成すると、

が画面上で初めてレンダリング(表示)されます.
適用のみ
外部APIを介してリソースが初めて受信され、API呼び出しが不要になった場合にのみ使用されます.
Reference
codestates:[react]データストリームを理解し、非同期リクエストを処理