Hook(2): useEffect

userEffectは、コンポーネントDidMount、コンポーネントDidUpdate、およびコンポーネントWillUnmount機能を提供することができる.
useEffectの基本フォーマットは、useEffect(() => {}, [])、2番目のパラメータ、および1番目の関数の戻り値によって機能が異なります.

既定では、すべてのレンダリングが完了すると実行されます。

次の説明では、最初のレンダー(First Render)をマウント(Load)に置き換えます.

1. componentDidMount

空の配列をmountでのみ実行されるコード、2番目のパラメータに入れます.

useEffect(() => {}, [])

2. componentDidUpdate

mountおよび特定の変数を変更するたびに実行されるコードは、2番目のパラメータの配列に変更する変数を追加します.

useEffect(() => {}, [특정 변수])

2番目のパラメータを省略すると、mountを含むレンダリングのたびに、propsまたはstate値が変更されるたびに実行されます.

useEffect(() => {})

3. componentWillUnmount

スクリーンアレンジ時(clean-up、クローズ時)に実行するコードは、最初の関数にコードを返すだけでよい.

useEffect(() => {return (...);}, [])

[例]

import "./styles.css";
import React, { useEffect } from "react";
import { useState } from "react";

export default function App() {
  const [count,setCount] = useState(0);  
  const test = () => {
    setCount(count+1);
  }
  useEffect(()=>{
      console.log(count);
  })

  return (
    <div className="App">
      <button onClick={test}>카운트 {count}</button>
    </div>
  );
}

userEffectの2番目のパラメータは省略されているため、レンダリングのたびに実行されます.

2番目のパラメータに次の特定の変数名を含む配列を指定すると、その変数の状態が変化するたびに配列が実行されます.

 useEffect(()=>{
      console.log(count);
  }.[count])

*実際、上記のコードの状態はcountのみ変化する可能性があるため、第1の方式のuserEffectと第2の方式のuserEffectは同じである.
リファレンス
velog.io/@bigbrothershin/Til-reactライフサイクル