アプリケーションに状態を追加する

完了

React はいくつかの方法で状態を管理します。 ここでは、主な方法の 1 つの React フックに着目します。

フックとは、React の内部動作にアクセスする機構です。 フックを使用すると、React で何らかの変更があった場合に、コードを実行できます。 または、それを使用して、状態などを React に登録できます。 たとえば、useState フックを使用して状態を作成した場合、状態オブジェクトとフックの値を更新する更新用の関数が取得されます。

シナリオ

多くの料理人がよく使用するテクニックの 1 つに、フランス語の "下ごしらえ" に由来する mise en place があります。料理人は、すべての品の準備が完了してから調理を開始します。

私達のレシピ アプリケーションでは、ユーザーが食材をタップして準備済みとしてマークできるようにしたいと考えています。 ここでは、まず状態を作成し、コンポーネントに表示情報を渡します。 次のユニットでは、イベントの処理方法を確認します。

状態を追加する

React では、すべての JavaScript オブジェクトまたはデータ型をステートフルとして登録できます。 オブジェクトの登録には、useState 関数を使用します。 useState 関数では、初期値を指定します。 これでは、新しく作成されたステートフル オブジェクトと、値の更新に使用できる別の関数が返されます。

Note

React では、状態は "不変" であり、変更することができません。 ステートフル オブジェクトの値を変更するには、適切な値が含まれる新しいインスタンスにそれを置き換えます。 この処理は、useState で返される関数によって管理されます。

1. VS Code のエクスプローラーで、src フォルダーを展開し、App.jsx ファイルを開きます。 initialRecipe オブジェクトが既にあることを確認します。 ここでは、このオブジェクトをステートフルな recipe の既定値として使用します。

2. useState から recipe 状態オブジェクトと setRecipe 関数を作成します。 これは、TODO: Create recipe state の行の後に、次のコードを追加して行います。

   const [ recipe, setRecipe ] = useState(initialRecipe);
   

   このコードでは、recipe がステートフル オブジェクトです。 recipe は、setRecipe 関数を使用して新しいバージョンに置き換えます。

3. recipe を使用し、prop をコンポーネントに渡すことができます。 次のコードでは、タイトルとフィードバックの表示に RecipeTitle コンポーネントを使用しています。 TODO: Pass recipe metadata to RecipeTitle というコメントの後に次のコードを追加し、title と feedback 値を RecipeTitle 値に渡します。

   <RecipeTitle title={recipe.title} feedback={recipe.feedback} />
   

4. RecipeTitle.jsx ファイルを開きます。 title と feedback の prop が表示されたコンポーネントがあることを確認します。

ページをテストする

1. すべてのファイルを保存します。

2. ブラウザーに戻って最新の情報に更新します。 これで、ページにレシピのメタデータが表示されます。