LifeCycle Method

ライフサイクルメソッドは、ブラウザで表示、更新、消失、またはエラーが発生したときに呼び出されるメソッドです.
ライフサイクルメソッドはclass형 componentでのみ使用でき、関数でuseEffect()を使用します.この2つの機能にはいくつかの類似点がありますが、互換性がない点もあります.

エレメントがレンダリングされたときの実行順序.

マウント

construct(ジェネレータ)

 constructor(props) {
    super(props);
    console.log("constructor");
  }

getDerivedStateFromProps
状態

としてpropsとして受信した変数を使用

static getDerivedStateFromProps(props, state)

この関数は、staticというデータ型を宣言する必要があります.

render
クラスのrender()関数に対応します.

componentDidMount
すべてのレンダリング後に実行される関数を完了します.

更新

getDerivedStateFromProps
状態としてpropsとして受信した変数を使用

static getDerivedStateFromProps(props, state)

この関数は、staticというデータ型を宣言する必要があります.

shouldComponentUpdate
構成部品を再レンダリングするかどうかを決定する関数です.React.memoと似ています.

render
クラスのrender()関数に対応します.

getSnapshotBeforeUpdate
コンポーネントの再描画後にDomに影響を与える前に呼び出された関数.DOMが変更される前に値を取得できます.
この関数반환하는 값はcomponentDidUpdate() 인자로 전달です.

componentDidUpdate
構成部品の更新が完了した後に実行される関数.

Unmountingアンインストール

コンポーネントが画面から消える前に実行される関数.

componentWillUnmount

 componentWillUnmount() { }

DOMのイベントを削除するか、settimeoutを使用してcleartimeoutを行います.

useEffect()

useEffect()は、クラス要素ではなく関数要素に使用されます.コンセプトはライフサイクルと似ていますが、駆動方法は異なります.useEffect()は、構成部品のマウント時(初期)、アンロード時(消失時)、および更新時に実行される関数です.
useEffect形状

import { useEffect } from "react"

useEffect(() => {
 code...
})

上記のコードは、レンダリングのたびに実行されます.
.
主に最初のインストール時に行われた作業です.

props

ライブラリの使用またはREST APIの使用

setIntervalまたはsetTimeout

アンインストール時に実行されるアクションは次のとおりです.

settimeoutを削除またはsetIntervalを削除

削除ライブラリ

ステータス変更によって構成部品が再レンダリングされると、userEffect()が実行されます.最初の実行時に一度だけ実行したい場合は、userEffect()の後に빈 배열を付けます.

useEffect(() => {
 code...
},[ ])  <- 빈배열로 인해 마운팅됐을때 한번만 실행됩니다.

特定の変数を変更するたびに実行する場合は、配列に対応する変数値を入れます.

useEffect(() => {
 code...
},[data1 , data2])  <- 해당 변수가 변경될때 마다 리렌더링 됩니다.

また、アンインストール時に機能を改善する場合は、returnをUSEffect()に宣言します.

useEffect(() => {
 code...
 return () => { return.. } <- 컴포넌트가 언마운트 될때 실행됩니다.
},[ ])