新しい現場で本格的にReactを触ることになったのでReactについて学んだことを備忘録として記事にしていきます。
今回からいくつかの記事にわけてReactでステートメントを保持・管理するための機能であるReact hooksについてまとめていきます。
サンプルコードについて
サンプルコードはこちらにあります。
記事ごとにコミットログで分けてあるので該当するコミットをご覧ください。
React hooksとは
React hooksとは関数コンポーネント内の状態やライフサイクルなどのReactの機能を「フック」するために用意されている機能群の総称です。
React hooksを副作用や状態管理の実行などを行うことができ、その用途に合わせて様々な種類のhooksを利用することができます。
React hooksはuse〇〇と名付けられており、〇〇の部分に利用する機能を表す単語が入ります。
React hooksはあらかじめ用意されている機能が多数あり、いくつかの記事に分けて紹介していきたいと思います。
今回は代表的なReact hooksであるuseState()を紹介します。
useState()とは
コンポーネントの状態を管理できるuseState()を紹介します。useState()は引数で渡した値を初期値に持つ、ステートとステートを設定する関数の配列を返します。
利用する際は以下のように呼び出し、ステートと関数を定義することで状態の管理を行えるようになります。
import { useState } from 'react';
const [state, setState] = useState('initial state');
// stateを更新する場合
setState('updated state');stateには文字列や数値、真偽値など様々な値を入れることができます。
利用する際には肩にも注意するようにしましょう。
useState()の具体的な利用例
サンプルコードの該当のコミットから具体例を見てみます。
今回は以下のようなTODOリストのカードコンポーネントのステータスをuseState()を利用して状態管理してみます。
カードコンポーネントの中のコードは以下のようになっています。
import React from "react";
const { useState } = React;
function Card(props) {
const [todoStatus, setTodoStatus] = useState('Not Ready');
const toggleStatus = () => {
switch(todoStatus) {
case 'Not Ready':
setTodoStatus('Ready');
break;
case 'Ready':
setTodoStatus('Compleated');
break;
case 'Compleated':
setTodoStatus('Not Ready')
break;
default:
break;
}
}
return (
<div className='card'>
<div className="todoIcon">✔︎</div>
<div className='todocontent'>{props.content}</div>
<div className="todoStatus">
<span>status:</span>
<button
className="statusButton"
onClick={() => toggleStatus()}
>
{todoStatus}
</button>
</div>
</div>
)
}
export default Card;useState()を利用してtodoStatusの状態を管理しています。
ステータスの部分はボタンとなっており、クリックするとtoggleStatus()が呼び出され、その中でsetTodoStatus()を利用してtodoStatusの状態を変更しています。
画面上でステータス部分をクリックしてみると状態が変わっていくのが確認できると思います。
では、状態管理の際、let todoStatusのように定義してtodoStatus = 'new Status'のように直接代入してはいけないのでしょうか。
結論から言うと、直接変数を定義して代入する方法では期待した挙動にはなりません。
なぜなら、ReactはuseState()によって定義されたステートが、useState()によって定義された関数によって更新された場合に状態の変更を検知することができ、画面の再描画が実施されるように設計されているからです。
まとめ
今回はReact hooksの第一弾として、最も利用されるhooksであるuseState()を紹介しました。
状態管理をすることで画面をユーザーの操作に合わせて描画し直すことなどができるようになり、アプリでできることが広がりますね。
ここまで読んでいただき、ありがとうございました。
それでは、また。
Reactの基礎の過去の記事はこちら。
新しい現場で本格的にReactを触ることになったのでReactについて学んだことを備忘録として記事にしていきます。何回か…
