モダンJSについてほぼ忘れたので今日はReactのそもそもを学び直します
プロジェクト作成
せっかくなのでTypeScriptバージョンの記事にならいました
私の環境ではcreate-react-appのバージョンが4.0.3だったので--templateが必要でした！
npx create-react-app {プロジェクト名} --template typescript
この記事にたどり着く前に非TypeScriptのReactプロジェクト作成の記事を読みながらTypeScriptに変えようとしたのですが失敗しました。。。
関数コンポーネント
以前はクラスコンポーネントというのが主流だったようです（他の言語のクラスと同じですね）
現在は関数コンポーネントが推奨されていて、以下が理由（他にもありますが分かりやすかったものはこちら）
- おまじないコードがなくなりコードがスッキリする
- ライフサイクルメソッドからの解放
- jQuery時代マウント時、描画時…などで同じような処理たくさん書いて読みづらくなったことある
- stateをコンポーネント間で共有したい時にクラスでは「引数にクラスを取り、新しいクラスを返す」クラスを作成する必要があったが、関数ではuseEffectフックを使ってコンポーネント内にstateが更新された時に実行したい処理を書くことができる
Hooks
関数コンポーネントで利用できるReactが提供しているライブラリまたはAPIのようなもの
- useState
- state変数、set関数を定義する
- useEffect
- 第2引数のstate変数が更新された時に第1引数のコールバック関数を実行する
- useRef
- useRefで定義した変数をテキストボックスref属性にする+イベント関数でstate変数にref変数をセットすることで入力値が表示されるようになる（双方向バインディングのような動き）
Hooksをちゃんと使えるようになると変数の状態管理がきれいにできそう！
