[自分用]Next.jsのイベント処理・ライフサイクルについて

イベントの種類

イベントの種類は大きく分けて2つある。
①ユーザーアクションによるイベント
　　一つ前の記事で扱ったuseCallbackは①に当てはまるもの。
②何かしらのタイミングによるイベント（時間経過や読み込みなど）

ライフサイクルとは

誕生してから消えてしまうまでの一連の流れのことであり、コンポーネントにも同じような考えがある。
その一つにマウント・アンマウントがある。
（ほかには、受け取るpropsが変わったときやstateが変わった時など）

・マウントとは
jsxを記述
↓
ブラウザで読み込み
↓
jsxがDOMになる。これをマウントという。

・アンマウントとは
なんらかの処理でコンポーネントが消えてしまうことをアンマウントという。

簡単な実装の流れ

マウント

まずuseEffectをインポート。
そして関数を記述（useCallbackと同じように第二引数を忘れないように注意）。

下記は例なので、実際にはDOMを直接いじるような記述方法はダメ！！！

export function Home(){
  useEffect(() => {
    document.body.style.backgroundColor='lightblue'
  },[])
}

このコードは「Homeコンポーネントがマウントされるとき（レンダリングされてDOMになるとき）に背景がライトブルーになる処理を走らせる」というコード。

※そしてこのマウントは、「アンマウント時に元に戻す処理」をしない限り他のページにも適用されてしまうので注意。

アンマウント

下記はアンマウントの書き方。
returnより上がマウント時の記述で、return内がアンマウントの記述となる。
関数をリターンすることでアンマウントが実行できる。

export function Home(){
  useEffect(() => {
    document.body.style.backgroundColor='lightblue'

　　　　return () => {
      document.body.style.backgroundColor = '';
    };
  },[])
}

「Homeコンポーネント」が使用されなくなる、つまり消えるためアンマウント状態になる。

豆知識

div id="__next"が一番親タグに記述されているが、これがNext.jsの管轄範囲になるらしい。
この中にあるDOMには、JavaScriptのように直接命令を与えない！

どうしても命令を与えたいならuseRefというものを使用するらしい。