なにやらコードをシンプルにして記述ができる方法があるらしいのでそれを学んでいきましょう
#hookって何
- クラスの機能を
Function Componentで使える様になる - 後方互換なので、後付けから導入しても、今までの機能に支障がない
基本的にはこんな感じ
じゃあなんで使うのかというと、Class Componentは少しややこしくて、Function Componentでシンプルにコーティングしたいからっていうのがあるんです
Class componentはthisの使い方とかstateの扱い方とか難しいらしいんですよね
また、ライフサイクルメソッドを使う時も、いちいちcomponentDidMount()とかcomponentWillUnmount()とかを別に分けて記述しなければならないんですよね
でも一つのライフサイクルなんだから一つにまとめたいじゃないですか
それを可能にするのがhookなんです！！
#useState()を使う
じゃあhookをどうやって使うのかというと、、
import React, {useState} from 'react';
こいつを記述してuseStateメソッドを使える様にする
そして宣言
const [state変数名, state変更関数名] = useState(state初期値);
あとは JSX内で使うだけですねーー
<input type = "checkbox" checked = {state関数名} id = "check" onClick = {() => state変更関数名(渡す値) }/>
こんな感じ
いちいちthisを記述して、これなに？？ってならなくなるのは良いことですねーーー
どんどんシンプルな記述をマスターしていきたいですねーーーー