初心者必見!ReactのuseStateで簡単に状態管理をマスターする方法

基礎

Reactは、ユーザーインターフェースを構築するための非常に人気のあるライブラリで、その中でもuseStateは状態管理の基本的なフックです。useStateを使うことで、コンポーネント内の状態を簡単に管理し、状態に基づいた動的なUIを構築することができます。

本記事では、useStateの基本から実際の使い方、応用例までを詳しく解説します。

useStateとは?

useStateは、Reactの関数コンポーネントで状態を管理するためのフックです。クラスコンポーネントでは、this.stateを使って状態を管理していましたが、useStateを使うことで関数コンポーネントでも簡単に状態を持つことができます!

基本的な構文

useStateを使うには、まずReactからインポートします。

import React, { useState } from 'react';

次に、useStateを呼び出し、初期値を設定します。以下は基本的な使用法です。

const [count, setCount] = useState(0);
ゆーや
ゆーや

ここで、countは現在の状態を表し、setCountはその状態を更新するための関数です。useStateに渡した初期値(ここでは0)は、コンポーネントが最初にレンダリングされるときの状態となります。

状態の更新

状態を更新する際には、setCount関数を使います。たとえば、ボタンをクリックしたときにカウントを増やす場合は、以下のようにします。

import React, { useState } from 'react';

function Hello() {
    // useStateを使ってカウントの状態を管理
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>カウント: {count}</h1>
      {/* ボタンをクリックするとカウントが増える */}
      <button onClick={() => setCount(count + 1)}>増やす</button>
    </div>
  );
}

export default Hello;
ゆーや
ゆーや

このHelloコンポーネントを表示し、ボタンをクリックすると回数が増えます!

親コンポーネントの状態を子コンポーネントで更新

App.js

import React, { useState } from 'react';
import Hello from './Hello';

function App() {
  // useStateを使ってカウントの状態を管理
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>親コンポーネントのカウント: {count}</h1>
      {/* 子コンポーネントにカウントとsetCountを渡す */}
      <Hello count={count} setCount={setCount} />
    </div>
  );
}

export default App;

Hello.js

import React, { useState } from 'react';

function Hello({ count, setCount }){
  const [count_c, setCount_c] = useState(0)

  return (
    <div>
      <h2>子コンポーネントのカウント: {count_c}</h2>
      {/* ボタンをクリックすると親のカウントが増える */}
      <button onClick={() => setCount(count + 1)}>親のカウントを増やす</button>
      <button onClick={() => setCount_c(count_c + 1)}>子のカウントを増やす</button>
    </div>
  );
}

export default Hello;

これで親の状態とこの状態をどちらも子コンポーネントで管理することができました!親からuseStateで定義した状態(count)とそのセッター(setCount)を渡してしまえば、あとは好きに更新するだけ!

まとめ

useStateは、Reactの関数コンポーネントで状態を管理するための基本的なフックであり、直感的で使いやすいことが特徴です。初期値を設定し、状態を更新する方法を理解することで、Reactのコンポーネントをより動的にし、ユーザーインターフェースを構築することができます。useStateを効果的に活用することで、Reactアプリケーションの品質を向上させることができるでしょう。

コメント

タイトルとURLをコピーしました