💡useEffect()とは?

import React, { useEffect } from "react";userEffectもReactが提供する機能の一つなので、Reactからimportを取得する必要があります.
userEffectには2つのパラメータがあります.

最初のパラメータはコールバック関数を伝達する.

の2番目のパラメータはDABと呼ばれ、依存配列(dependency array)を伝達する必要がある.
dabs=依存配列=依存配列の値が変化すると、コールバック関数が実行されます.

応答のライフサイクルを制御

1.マウントポイント

useEffect(() => {
    console.log("Mount탄생!");
  }, []);

別の値を更新して、コンソールがmount(誕生)時にのみ実行されるかどうかを決定し、コンソールが一度だけポップアップされることを確認します.
構成部品は更新(再ロード)されますが、空の配列[]をuserEffectに渡すと、コールバック関数は構成部品のマウント(誕生)時にのみ実行されるため、コンソールに一度だけ表示されます.
すなわち,素子をmount(誕生)時に表示したい場合は,useEffectで2番目のパラメータdabに空の配列を渡し,コールバック関数にやりたいことを入れるだけでよい.

2.更新ポイント

シンボル更新(=再レンダリング)の瞬間?

ステータスが

に変更されました.

親からもらった道具が

に変わりました

親コンポーネント

が再ロードされました.

1）DABに何も伝えていない

useEffect(() => {
    console.log("Update!");
  });

DABを渡さないと、更新のたびにコールバック関数が実行されます.

2）DABに特定の値が追加された場合：

  useEffect(() => {
    console.log(`count is update : ${count}`);
  }, [count]);

  useEffect(() => {
    console.log(`text is update : ${text}`);
  }, [text]);

何も触れない画面

検出したい値をDABに指定し、値が変化した瞬間だけコールバック関数を実行させるだけです
(たとえば、アイテムの数が限られている場合は、この関数を使用して検出し、これ以上超えないように設定できます!次のコードを参照してください)

  useEffect(() => {
    console.log(`count is update : ${count}`);
    if (count > 5) {
      alert("최대수량은 5개입니다.");
      setCount(5);
    }
  }, [count]);

3.UnMount（死亡）時点

const UnmiuntTest = () => {
  useEffect(() => {
    console.log("Mount!");

    return () => {
      //Unmount시점에 실행됨
      console.log("Unmount!");
    };
  }, []);

  return <div>Unmount Testing Component</div>;
};

ON状態の場合

OFF状態の場合

1、2例目のコード(コード解析の参照のみ)

import React, { useEffect, useState } from "react";

//카운터에 사용할 count state, input에 사용될 text state
const Lifecycle = () => {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("");

//1번 Mount탄생시점
  useEffect(() => {
    console.log("Mount탄생!");
  }, []);

//2번 Update시점(댑스입력X)
  useEffect(() => {
    console.log("Update!");
  });

//2번 Update시점(댑스입력O)
  useEffect(() => {
    console.log(`count is update : ${count}`);
    if (count > 5) {
      alert("최대수량은 5개입니다.");
      setCount(5);
    }
  }, [count]);

  useEffect(() => {
    console.log(`text is update : ${text}`);
  }, [text]);

  return (
    <div style={{ padding: 20 }}>
      <div>
        {count}
        <button onClick={() => setCount(count + 1)}>+</button>
      </div>
      <div>
        <input value={text} onChange={(e) => setText(e.target.value)} />
      </div>
    </div>
  );
};

export default Lifecycle;

3番目の例で使用するコード(コード解析を参照)

import React, { useEffect, useState } from "react";

const UnmiuntTest = () => {
  useEffect(() => {
    console.log("Mount!");

    return () => {
      //Unmount시점에 실행됨
      console.log("Unmount!");
    };
  }, []);

  return <div>Unmount Testing Component</div>;
};

const Lifecycle = () => {
  const [isVisible, setIsVisible] = useState(false);
  const toggle = () => setIsVisible(!isVisible);

  return (
    <div style={{ padding: 20 }}>
      <button onClick={toggle}>ON/OFF</button>
      {isVisible && <UnmiuntTest />}
    </div>
  );
};

export default Lifecycle;

⭐️ {isVisible && <UnmiuntTest />}=llifecycleでisVisibleがtrueの場合にのみ、UnmintTest構成部品が画面に表示されます.
すなわち、isVisibleがtrueの場合、UnmintTest構成部品の値を返して画面にレンダリングします.
isVisibleがfalseの場合、ショート評価が行われるため、UnmintTest構成部品もレンダリングされません.
&&ショート評価?
両方がtrueの場合にのみ、結果はtrue になります.

すなわち、前の値がfalseである場合、後の値はtrueであるが、無条件はfalseである.

🚀参考資料

React-lifecycle-methods-diagram
React公式ドキュメント-userEffect
反応講義-李正煥講義