Reactの基本：PropsとStateの理解

はじめに

Reactの魅力の一つは、コンポーネントベースのアーキテクチャにあります。
このアーキテクチャにおいて、コンポーネントの動作や表示を制御するために「Props」と「State」が使用されます。これらはReact開発において核となる概念になるのでまとめてみました。

Props

Propsの概要

Propsは、親コンポーネントから子コンポーネントに渡されるデータの集まりです。
Propsは、コンポーネントに対して外部から与えられるデータや設定を表します。

Propsの特徴

不変性: Propsはそのコンポーネントに渡された後、変更されることはありません。子コンポーネントはPropsを直接変更することはできません。
コンポーネントの再利用: 同じコンポーネントを異なるPropsで再利用できます。

Propsの具体的な使用例

// Propsを受け取る関数コンポーネント
function UserProfile(props) {
  // Propsを使用してUIを描画
  return (
    <div>
      <h1>{props.name}</h1> {/* props.nameを表示 */}
      <p>{props.description}</p> {/* props.descriptionを表示 */}
    </div>
  );
}

// 親コンポーネント
function App() {
  // UserProfileコンポーネントに異なるPropsを渡して再利用
  return (
    <div>
      <UserProfile name="太郎" description="エンジニア" />
      <UserProfile name="花子" description="デザイナー" />
    </div>
  );
}

State

Stateの概要

Stateは、コンポーネント内で管理されるデータです。Stateを使うことで、コンポーネントはユーザーインタラクションや時間の経過などに応じて、その表示を更新することができます。

Stateの特徴

可変性: Stateはコンポーネント内で変更可能です。この変更は通常、ユーザーのアクションに応じて行われます。
カプセル化: Stateは通常、それを持つコンポーネントに限定されます。他のコンポーネントから直接アクセスされることはありません。

Stateの具体的な使用例

// Stateを使用するクラスコンポーネント
class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { seconds: 0 }; // Stateの初期化
  }

  componentDidMount() {
    // コンポーネントがマウントされたらタイマーを開始
    this.interval = setInterval(() => {
      // 1秒ごとにStateを更新
      this.setState(prevState => ({ seconds: prevState.seconds + 1 }));
    }, 1000);
  }

  componentWillUnmount() {
    // コンポーネントがアンマウントされる前にタイマーをクリア
    clearInterval(this.interval);
  }

  render() {
    // Stateを使用してUIを描画
    return <div>経過時間: {this.state.seconds}秒</div>;
  }
}

PropsとStateの違い

Props

親コンポーネントから渡されます。
コンポーネントの外部インターフェースを表します。
不変であり、コンポーネント自身では変更されません。

State

コンポーネント内で宣言され、管理されます。
コンポーネントの内部状態を表します。
可変であり、コンポーネントのライフサイクルに応じて更新されます。

まとめ

PropsとStateはReactのコンポーネントを構築する際の基本的な要素です。Propsはコンポーネントに対する外部からの入力を提供し、Stateはコンポーネント内部で管理されるデータを扱います。これらを適切に理解し使用することで、動的でインタラクティブなUIを構築することが>できます。