ああ...今日はSide-Effectとは何か知りたいです.
では早速

Side-Effect?

Side-Effectって何ですか?

まず正義を理解しましょう.
ウィキペディアは、Side-Effectを次のように定義します.(副作用?)
副作用
計算機科学では,関数は結果値以外の状態を変化させる際に副作用がある.たとえば、関数は、グローバル変数または静的変数を変更したり、パラメータの1つを変更したり、画面またはファイルにデータを書き込んだり、他の副作用を持つ関数からデータを読み出したりすることがあります.
副作用...私たちは通常いつ副作用という言葉を使いますか?
思いがけない作用が起こったとき、副作用ではないでしょうか.
頭痛薬を飲んで、飲んでからお腹が痛くなりました...(有害副作用)
キムチを食べたら急に風邪が治った...(不可解な副作用)
このように副作用を示す.Side-Effectは必ずしも有害な影響しか生じないとは限らない!(不思議なキムチのたとえのように…)
いずれにしても、Side-Effectは使用する場所によって意味が異なりますが、通常は「思いがけない結果」を意味します!
そして今日私たちは反応の中でSide-Effectが何を意味するかを理解します!

例

Side-Effect例
反応中のSide-Effectの例を見てみましょう.
反応器では、Side-Effectは以下のように定義されています!
関数の外部に存在する値やステータスを変更するなど、関数の実行時の動作.たとえば、関数でグローバル変数の値を変更したり、関数外部ボタンのテキストを変更したり、ファイルに書き込み、Cookieを保存したり、ネットワークを介してデータを送信したりします.Side-Effectコード

function UserProfile({ name }) {
  const message = `${name}님 환영합니다!`; //함수 반환 값 생성

  // Bad!
  document.title = `${name}의 개인정보`; //함수 외부와 상호작용하는 Side-effect 코드
  return <div>{message}</div>;
}

これがSide-Effectコードです!
しかし、これはなぜSide-Effectヤードなのでしょうか.
私たちが見たい部分はdocument.title部分です!
注記に示すように、構成部品はSide-Effectヤードである.
これは、関数がパラメータ生成結果を受け入れることとは無関係であるため、Side-Effectコードです.
(後でこれらの不一致なコードが積み重なると、コードが複雑になるでしょう…?)
反応の中でSide-Effectの関数を生み出すのはお節介な関数のような気がします.
しかし、このSide-Effectは必ずしも悪いとは限らないが、コードを理解しにくくし、開発費用を増やしたため、Reactのような「宣言型プログラミング」はSide-Effectを最小化する方向に進んでいる.
上記のdocument.titleコードがより重いタスクを処理するコードである場合、デバイスをレンダリングするたびにプログラムが遅延します.
開発者はReactが構成部品を再レンダリングする時点を正確に制御するのは難しいため、Reactが再レンダリングするたびにプログラムの遅延の原因を探すのに苦労します.

Side-Effect処理

では、反応器はSide-Effectをどのように処理しますか?
反応器は、Side-Effectの動作を分離するためにUseEffect Hookをサポートする.
では、USEffectを利用するにはどうすればいいのでしょうか.

function UserProfile({ name }) {
  const message = `${name}님 환영합니다!`;

  //Side-Effect 코드를 UseEffect로 분리
  useEffect(() => {
    document.title = `${name}의 개인정보`; 
  }, [name]);
  return <div>{message}</div>;
}

そうすればいいのに.useEffect()を使用してSide-Effectタスクを分離することで、Side-Effectタスクを適切な時間に実行できます.
この処理は、関数型要素をすばやくレンダリングし、プログラムを複雑化させるSide-Effect領域を関数から分離するのに役立ちます.
このように分離すると、どの開発者も、素子がSide-Effectを含むことを知ることができる.
また、Reactは最適化された時間にuseEffect()に登録されたSide-Effectコードを実行し、コンポーネントの実行速度を向上させるのに役立ちます.

の最後の部分

この文章では,反応におけるSide-Effectとは何か,どのように処理するかをまとめた.Side-Effectは多くの場所で異なる意味を持っています
今日整理するときにいくつかの場所を探しましたが、Side-Effectで「思いがけない効果」を生み出す概念はどこでも似ていますが、処理の仕方が違うようです.
そして、今日初めて知ったuseEffect()は、Side-Effectの処理を支援するHookです.useEffect()は、通常、APIからデータを受信した後、ステータス置換レンダリングのために使用されるか、またはcomponentDidMountおよびcomponentDidUpdate、componentWillUnmountのようなライフサイクルメソッドの代わりに使用されるか、useEffect()を処理するために提供される方法であることが分かった.
そして私が驚いたのは、APIがデータを受信する行為もSide-Effectだったことです!Side-Effectを利用した処理の大部分はuseEffect()かも…?
本文書に記載されている部分に反応する👇👇👇

https://ko.reactjs.org/docs/hooks-effect.html Side-Effectを簡単に知りたいだけですが、他の知識も身につけているようです.
これもSide-Effectですか?ははは
リファレンス
https://points.tistory.com/86
https://www.inflearn.com/questions/12660
https://ko.reactjs.org/docs/hooks-effect.html