【初心者向け】ReactでStateとPropsを使いこなすためのポイント

ReactにおけるStateとPropsの違い

State

• コンポーネント自身の状態を表します。
• ユーザー入力や時間経過によって変化します。
• コンポーネント内でのみアクセス可能で、変更はthis.setState()メソッドを使用して行います。
• 例：ボタンのクリック状態、入力されたテキスト、カウントダウンタイマーの残り時間など。

Props

• 親コンポーネントから子コンポーネントへ渡されるデータです。
• コンポーネントの動作をカスタマイズするために使用されます。
• 子コンポーネント内でのみアクセス可能で、変更することはできません。
• 例：ユーザー名、表示するリストデータ、APIエンドポイントなど。

使い分け

• コンポーネント自身の状態を表す場合はStateを使用します。
• 親コンポーネントから子コンポーネントへデータを渡す場合はPropsを使用します。

例

以下のコードは、ボタンのクリック状態をStateで管理し、親コンポーネントから子コンポーネントへテキストデータをPropsで渡しています。

// 親コンポーネント
const App = () => {
  const [count, setCount] = useState(0);
  const text = "Hello, World!";

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>カウントアップ</button>
      <ChildComponent count={count} text={text} />
    </div>
  );
};

// 子コンポーネント
const ChildComponent = ({ count, text }) => {
  return (
    <div>
      <p>カウント：{count}</p>
      <p>テキスト：{text}</p>
    </div>
  );
};

// 親コンポーネント
const App = () => {
  const [count, setCount] = useState(0);
  const text = "Hello, World!";

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>カウントアップ</button>
      <ChildComponent count={count} text={text} />
    </div>
  );
};

// 子コンポーネント
const ChildComponent = ({ count, text }) => {
  return (
    <div>
      <p>カウント：{count}</p>
      <p>テキスト：{text}</p>
    </div>
  );
};

解説

• 親コンポーネントAppでは、useStateフックを使用してcountというState変数を定義しています。
• countはボタンのクリック回数によって更新されます。
• textという変数を定義し、"Hello, World!"というテキストデータを保持します。
• ChildComponentという子コンポーネントをレンダリングし、countとtextをPropsとして渡します。

子コンポーネントChildComponentでは

• Propsとして渡されたcountとtextを使用します。
• countとtextをそれぞれp要素で表示します。

実行結果

このコードを実行すると、以下のような画面が表示されます。

カウント：0
テキスト：Hello, World!

ボタンをクリックするたびに、カウントが1ずつ増えていきます。

このサンプルコードは、StateとPropsの基本的な使い方を理解するのに役立ちます。

• 入力されたテキストをStateで管理するサンプルコード
• カウントダウンタイマーを実装するサンプルコード
• APIからデータを取得して表示するサンプルコード

これらのサンプルコードは、インターネット上で見つけることができます。

StateとPropsは、Reactにおける重要な概念です。それぞれの役割と性質を理解し、適切に使用することで、効率的にコンポーネントを開発することができます。

StateとPropsを使う他の方法

Context APIは、コンポーネントツリー全体でデータを共有するための方法です。StateとPropsと比べて、以下の利点があります。

• コンポーネントツリーの深い階層にあるコンポーネント間でも、簡単にデータを共有できる
• Propsで渡す必要がないため、コードがよりシンプルになる

Reduxは、状態管理のためのライブラリです。Stateをグローバルなストアに保存し、コンポーネントが必要に応じてそのストアにアクセスできるようにします。StateとPropsと比べて、以下の利点があります。

• 大規模なアプリケーションでの状態管理が容易になる
• タイムトラベルやデバッグなど、高度な機能を利用できる

Zustandは、Reduxよりも軽量な状態管理ライブラリです。Reduxと同様の機能を提供しますが、コード量が少ないため、よりシンプルで使いやすいです。

Recoilは、状態管理のためのライブラリです。Reduxと同様の機能を提供しますが、より直感的で使いやすいAPIを提供します。

ZustandとReact Hook Formを組み合わせることで、フォームの状態管理を簡単に実装できます。

StateとPropsは、シンプルなアプリケーションやコンポーネント間でデータ共有が少ない場合に適しています。

Context APIは、コンポーネントツリー全体でデータを共有する場合に適しています。

Reduxは、大規模なアプリケーションでの状態管理に適しています。

Zustandは、Reduxよりも軽量な状態管理ライブラリです。

Zustand + React Hook Formは、フォームの状態管理を簡単に実装したい場合に適しています。

Context API

const MyContext = createContext(null);

const MyProvider = ({ children }) => {
  const [count, setCount] = useState(0);

  return (
    <MyContext.Provider value={{ count, setCount }}>
      {children}
    </MyContext.Provider>
  );
};

const MyConsumer = () => {
  const { count, setCount } = useContext(MyContext);

  return (
    <div>
      <p>カウント：{count}</p>
      <button onClick={() => setCount(count + 1)}>カウントアップ</button>
    </div>
  );
};

const App = () => {
  return (
    <MyProvider>
      <MyConsumer />
    </MyProvider>
  );
};

Redux

// ストア
const store = createStore(reducer);

// コンポーネント
const MyComponent = () => {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <p>カウント：{count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>カウントアップ</button>
    </div>
  );
};

// アプリ
const App = () => {
  return (
    <Provider store={store}>
      <MyComponent />
    </Provider>
  );
};

Zustand

// ストア
const store = create({
  count: 0,
});

// コンポーネント
const MyComponent = () => {
  const { count, setCount } = useStore();

  return (
    <div>
      <p>カウント：{count}</p>
      <button onClick={() => setCount(count + 1)}>カウントアップ</button>
    </div>
  );
};

// アプリ
const App = () => {
  return (
    <ZustandProvider store={store}>
      <MyComponent />
    </ZustandProvider>
  );
};

StateとProps以外にも、Reactでコンポーネントの状態を表現する方法があります。

それぞれの方法の特徴を理解し、適切な方法を選択することで、効率的にコンポーネントを開発することができます。