5. ステートとプロップス

はじめに Reactでは、データの管理やコンポーネント間でのデータの受け渡しは不可欠です。この章では、StateとPropsについて学びましょう。GeekとGalというキャラクターが、これらの概念をどのように探求するか見てみましょう！

ReactのStateとPropsについて学ぶ準備はできてる？

うん！Stateって何？

Stateは、コンポーネントの内部データのことだよ。コンポーネントのプライベートメモリみたいなもの！

State

Stateは、クラスコンポーネントやフックを使った関数コンポーネントで使うことができるわ。クラスコンポーネントから始めましょう！

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
}

なるほど！クラスコンポーネントのコンストラクタでStateを定義するんだね。

その通り！では、フックを使った関数コンポーネントでStateをどのように使うか見てみましょう！

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
}

わかった！関数コンポーネントでStateを管理するために useState フックを使うんだね！

そう！Stateを更新するには、クラスコンポーネントでは setState メソッドを、関数コンポーネントではstate更新関数を使うのよ。

Props

さて、Propsについて話しましょう！Propsは"properties"（プロパティ）の略で、コンポーネント間でデータを渡すために使われるわ。

Propsはどのように使うの？

HTML属性のようにコンポーネントにPropsを渡すことができるわ！例を見てみましょう：

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

const element = <Greeting name="Alice" />;

ああ、コンポーネントにデータを渡すためにHTML属性のようにPropsを使って、コンポーネント内でアクセスするんだね！

まさに！Propsを使うことで、コンポーネント間でデータを簡単に共有できるわ！

おもしろい例

StateとPropsを使った面白い例がある？

もちろん！プロパティに基づいて気分を変える「Mood Changer」コンポーネントを作ってみましょう！

import React, { useState } from 'react';

function MoodChanger(props) {
  const [mood, setMood] = useState('😐');

  function changeMood() {
    setMood(props.newMood);
  }

  return (
    <div>
      <h1>Mood: {mood}</h1>
      <button onClick={changeMood}>Change Mood</button>
    </div>
  );
}

const element = <MoodChanger newMood="😃" />;

ハハ、面白いね！StateとPropsを使ってMood Changerコンポーネントを作ってる！

気に入ってもらえてうれしいわ！練習を続けて、コンポーネントをさらにインタラクティブにしましょう！

おわりに Reactでは、StateとPropsはデータの管理に不可欠です。Stateはコンポーネントの内部データであり、Propsはコンポーネント間でデータを渡すために使われます。StateとPropsを理解することで、インタラクティブでダイナミックなアプリケーションを作成できます！🚀