Reactにおけるステートの紹介
次に解説する概念は、ステートと呼ばれます。ステートはコンポーネントのリアクティブな変数を表します。
リアクティブとは、ステートが変更されると、そのステートが使用されているすべての箇所に変更が反映されることを意味します。技術的には、いずれかのステートが変更されるとコンポーネント全体が再レンダリングされることで実現されます。
ステートを使用するには、まずuseState関数をインポートする必要があります:
import React, { useState } from 'react';
useState関数は、パラメータとしてステートの初期値を受け取り、結果として2つの要素からなる特別な配列を返します。配列の最初の要素にはステートの現在値が格納され、2番目の要素にはステートを変更するための関数が格納されます。
ステートを正しく機能させるには、ステートを直接変更することはできず、変更用の関数を使用する必要があります。そうして初めてリアクティブ性が機能します。