Reactでレンダー後に処理を実行するフック(useEffect)

 クラスコンポーネントの場合、componentDidMount(),componentDidUpdate(),componentWillUnmount()などのライフサイクルに関する関数を書くことで、マウント時やレンダー時などに処理をはさむことができる。
けど、関数コンポーネントの場合は、これらの関数は使えないので代わりに、useEffect()を使う。

[ドキュメント]
https://ja.reactjs.org/docs/hooks-effect.html

[インストール]

Reactに含まれるので、特にインストール不要

[使い方]

1. とにもかくにもインポート
   import react ,{useEffect} from 'react'
   
   
2. 関数コンポーネントの処理の中で記載
   
   useEffect(処理関数,オプション)
   
   処理関数：useEffectはレンダー毎に第一引数に設定される処理関数を実行する。
   
   第一引数に設定される処理関数の戻り値にコンポーネントがアンマウントする際のクリーンナップ実行時に実行される。
   たとえば、setInterval()で定期的に処理を実行した際に、コンポーネントがアンマウントされた場合に処理と中止させる場合に使う。
   
   
   オプション：設定した処理関数の実行タイミングを制御する。
       指定なし：毎回
       []    ：初めの一回のみ
       [state] ：useState()で取得した状態管理に使用している変数を指定すると、状態が変化したときに実行される。
   
   
   useEffectで設定できる関数は１つなので、使い分けたい場合は、複数記述する。