Web開発ログ | エンジニアに役立つ情報 | 開発の中での気づきを発信

高卒Devlog

TSLab【第2回 React定例会】React hooks

thumbnail

こんにちは! RYOTAです!

当記事をご覧くださりありがとうございます!

当記事はTSLab・React定例会のレポート記事になります。

はじめに

私が運営しているTSLabの第2回・React勉強会の実施ログとなります。
今回のテーマは【React hooks】。カルキチさんに講師をお願いして実施させていただきました。
@karukichi_yah Twitter
前回の勉強ではReactのテンプレートの作成やコンポーネント作成、Propsの受け渡しまでを実施しましたので、前回に引き続きReact開発で知っておくべき基礎の内容を触れていきます。
前回のコンポーネント作成、今回のReact hooksは、どの現場でもほぼ間違いなく使う知識になるので、必ず覚えておきたい内容ですね。
前回の内容が気になる方はこちらの記事も合わせてご覧くださいませ。

Hooksとは

まずはReact Hooksの概要についてご解説頂きました。
フック API リファレンス – React ユーザインターフェース構築のための JavaScript ライブラリ
hooksとは関数コンポーネントでは通常出来なかった処理を、「use〇〇」というReact公式の関数を使うことで実行可能になります。
カルキチさんがドキュメントを用意してくれていますが、hooksを使った場合とそうでない場合の比較が載っているので、是非ご覧になってください。
https://github.com/Yota-K/react-study/blob/main/doc/%E7%AC%AC2%E5%9B%9E/Hooks%E3%81%A8%E3%81%AF.md

useState

まずは1番使用頻度の高いuseState。
読んで字の如し、「State = 状態」を「use = 使う」hooksとなります。
前回の勉強会では簡単な状態の変更を行いましたが、今回の勉強会ではオブジェクト型や、配列型のデータを持たせて変更させる所までを題材にしました。
初期値の概念や、スプレット構文で現在のstateを展開しつつ変更プロパティだけ代入するなど、Reactの開発現場で実際に使うテクニックになるので是非覚えておきたい内容ですね。
詳しくは下記のドキュメントをご覧ください。
https://github.com/Yota-K/react-study/blob/main/doc/第2回/useStateについて.md

useEffect

次に使用頻度が高いのがuseEffect。
公式には

副作用を有する可能性のある命令型のコードを受け付けます。
https://ja.reactjs.org/docs/hooks-reference.html

と記載がありますが、画面の初期レンダリング時にAPIを発火させて表示データを取得したり、何かのstateが変更された場合に決められた関数を発火させたりと、さまざまな用途で使用することが可能です。
特に、初期レンダリング時のデータフェッチはとてもよく現れる実装になるので、是非覚えておきたい内容ですね。
詳しくは下記のドキュメントをご覧ください。
https://github.com/Yota-K/react-study/blob/main/doc/第2回/useEffectについて.md

useContext・useReducer

こちらはほぼセットで使われるhooks。
コンポーネントを跨いで状態管理をしたい場合に使えるものとなります。
useStateの場合、親で定義したstateを子のコンポーネントに渡し、さらにそのstateを孫に渡すといった「propsのバケツリレー」が起きてしまうのですが、それを解決することが可能になります。
useContextでコンポーネント自体を覆うデータ領域を作り、コンポーネントの階層に縛られずにどこからでもアクセス出来る状況を作ります。
その上でuseReducerを使うことでuseStateよりも複雑な処理ができる状態管理を行います。
この二つを使うことで孫のコンポーネントから直接状態にアクセスすることが出来るようになり、結果的にpropsを子や孫に渡す必要がなく、簡潔なコンポーネントを作成することが可能となります。
詳しくは下記のドキュメントをご覧ください。
https://github.com/Yota-K/react-study/blob/main/doc/第2回/useContextとuseReducerについて.md
※(ReduxやVuexに触れていないと、すんなり理解するのが難しいかも...)
※(この二つはどこかでまた深掘る会を設けようと思います。)

さいごに

React勉強会シリーズ第2弾終了!
カルキチさん本当にありがとうございました!
今回までの内容が理解できればある程度簡単なアプリが作れるようになってると思います!
useReducerとuseContextは"分かったつもりで終わらせてしまう"のは勿体無いので、是非ご自身でも触って理解を深めて頂きたいですね!
次回はReact routerやリダイレクト処理などについて触れていこうと思います!
以上。最後までご覧くださりありがとうございました!