reactの各素子には생성 -> 업데이트 -> 제거団のライフサイクルがある.

大きく分けて3種類に分けられます.생성(mount), 업데이트(update), 제거(unmount).마운트は、構成部品関数を実行し、結果の要素を仮想DOMに挿入し、実際のDOMを更新するプロセスである.언마운트はDOMから削除されます.

🎉 mount

constructor -> render -> componeneDidMount

constructor

react素子の作成者は、素子がマウントされる前に呼び出される.
1. this.stateでstate値を宣言/初期化する
2.バインドイベントの処理方法

constructor(props) {
  super(props);
  // 여기서 this.setState()를 호출하면 안 된다!
  this.state = { counter: 0 };
  this.handleClick = this.handleClick.bind(this);
}

注意事項
1.バインディング方法または初期化stateの動作がない場合、応答要素はジェネレータを実装する必要がない.
2.super(props)this.propsを呼び出してジェネレータ内で定義されていない場合、エラーが発生する可能性があります.
3.コンストラクション関数の内部でsetStateなどの更新を実行しないでください.必要に応じてstateで定義できます.マウント前に更新するのは望ましくありません.
この場合、componentDidMount()が使用される.

render

これはクラス構成部品で実現しなければならない唯一の方法です.
このメソッドを呼び出すときは、this.propsとthis.stateの値を使用して、次のいずれかの値を返します.

反応シンボル:通常jsxを用いて

を生成する

	render() {
      return (
        <div>yeewon</div>
      );
	}

配列およびフラグメント:render()を介して複数のセグメント

が戻る.

    render() {
      const ButtonList = lists.map((data, index) => {
        return (
          <button key={index} type="button">
            {data}
          </button>
        );
      });

        return (
          // 여러 자식을 그룹화 -> 단축 문법 <></>
            <Fragments>
                {ButtonList}
            </Fragments>
        );
    }

portal:サブエンティティ

を個別のDOMサブツリーでレンダリングする

文字列と数字

booleanまたはnull

	render() {
      return (
        {isLogin && <Login />}
      );
	}

注意事項
1.render()関数は純粋な関数でなければなりません.
純=構成部品のステータスは変更されず、呼び出されるたびに同じ結果が返されます.ブラウザと直接対話しません.
2.render()内でStateを設定できません.renderでステータスを更新するとrenderが呼び出されます...無限ループに陥る.

componentDidMount

コンポーネントのインストール後、ツリーを挿入した後に呼び出されます.データ購読を設定するのに良い場所です.

DOMノードを必要とする初期化操作があれば、非常に適切である.たとえば、この方法は、DOMノードのサイズや位置(モードやツールチップなど)を先に測定する必要がある場合に適しています.

の外部からデータをロードする必要がある場合、ネットワーク要求を送信することができる.

✏️ Update

( New props, setState, forceUpdate ) -> render -> componentDidUpdate
更新は以下の4つの場合に発生します.

1. props가 바뀔 때 
2. state가 바뀔 때 
3. 부모 컴포넌트가 리렌더링 될 때
4. this.forceUpdate가 강제로 렌더링을 트리거할 때

componentDidUpdate

更新が発生するとすぐに呼び出されます.
この方法は、

コンポーネントを更新するときにDOMを操作するために使用することができる.

以前と現在のpropsを比較し、ネットワークリクエストを送信します.

  componentDidUpdate(prevProps) {
    // 전형적인 사용 사례 (props 비교를 잊지 마세요)
    if (this.props.userID !== prevProps.userID) {
      this.fetchData(this.props.userID);
    }
  }

注意事項
1.componentDidUpdate()からsetState()をすぐに呼び出すこともできますが、上記の例に示すように、条件文ラップを使用しない場合、無限反復が発生する可能性があります.
2.上から降りてきた道具をそのまま状態に保存するのはよくないが、代わりに直接道具を使う.
参考資料

🔚 Unmount

componentWillUnmount

構成部品がアンインストールされ、削除する前に呼び出されます.
タイマーの削除、ネットワークリクエストのキャンセル、コンポーネントDidMount()内で作成したサブスクリプションのキャンセルなど、必要なすべてのクリーンアップタスクを実行します.
構成部品インスタンスがアンインストールされても、再マウントは絶対に行われません.

まとめ

例を用いてプロセスをまとめた.
最終的には、インストール後にステータスが変化した場合、reactは再レンダリングされます.(renderメソッドを再呼び出しします.)
この2番目のrenderは、マウントせずにDOMを更新します.

function App() {
  const [showUser, setShowUser] = useState(false)

  return (
    <div>
      {showUser && <User name="Brad" />}
      <button onClick={() => setShowUser(true)}>
        Show User
      </button>
      <button onClick={() => setShowUser(false)}>
        Hide User
      </button>
    </div>
  )
}

// React starts renders our component and since this is the
// first render, it "mounts" the component to the DOM:
App()

// Then state changes and React now needs to re-render the
// component with the new state in place:
App()

// State changes again, React re-renders again:
App()

最初、Appはレンダリングしてマウントしますが、showUserはfalseなので、ユーザーはマウントしません.
showUserがtrueの場合、Appは再レンダリングされ、Userは最初にレンダリングされてマウントされます.
その後、state値が変更され、Appが再レンダリングされます.reactがマウントされるユーザは、以前のrenderと比較してアプリケーションの一部ではないため、DOMからアンインストールされます.
各構成部品には独自のストロークがあります.親子関係では、親コンポーネントがマウントされている場合にのみ、サブコンポーネントが表示およびマウントされます.また、親コンポーネントがアンインストールされると、子コンポーネントもアンインストールされます.

好奇心のある場所

インストール手順はconstructor->render->componentDidMountです.
コンストラクション関数がマウントされる前にコンポーネントDidMountがマウントされた後に
最終的にrenderメソッドを呼び出すのはmountですか?
いいえ.
これはrenderとmountの概念の曖昧さに対する問題である.
アレンジすると、最初の構成部品はレンダリング時にマウントされますが、propsまたはstateは変更されるため、レンダリング時にマウントされません.
https://ko.reactjs.org/docs/react-component.html