【React】超初心者向けPropsとStateの違い

ReactコンポーネントのPropsとStateの違い

Reactはコンポーネントベースのライブラリであり、コンポーネントはアプリケーションのビルディングブロックとして機能します。Reactコンポーネント内でデータを管理するために、プロップスとステートという2つの主要な概念が利用されます。これらは異なる目的で使用され、以下にその違いをまとめます。

プロップス（Props）

1. 外部から渡されるデータ

   • プロップスは、親コンポーネントから子コンポーネントにデータを渡すためのものです。
   • 親コンポーネントが子コンポーネントに情報を渡すことができ、これによりデータの共有が可能となります。

2. 読み取り専用

   • プロップスは子コンポーネント内で読み取り専用です。子コンポーネント内でプロップスを変更することはできません。

3. 関数コンポーネントとクラスコンポーネントの両方で使用

   • 関数コンポーネントでは、引数としてプロップスを受け取ります。
   • クラスコンポーネントでは、this.propsを介してプロップスにアクセスします。

// Example of using props in a functional component
const MyComponent = (props) => {
  return <p>{props.message}</p>;
};

// Example of using props in a class component
class MyComponent extends React.Component {
  render() {
    return <p>{this.props.message}</p>;
}

ステート（State）

1. 内部で管理されるデータ

   • ステートは、コンポーネント内で管理される内部の状態データです。
   • ステートはコンポーネントがその状態を変更できるようにするために使用されます。

2. 変更可能

   • ステートは変更可能で、setStateメソッドを使用して更新できます。
   • ステートが変更されると、Reactは再レンダリングをトリガーし、UIが変更されます。

3. 主にクラスコンポーネントで使用

   • 関数コンポーネントでもステートを利用できるようになりましたが、クラスコンポーネントでの使用が主流です。
   • クラスコンポーネントでは、this.stateを介してステートにアクセスし、this.setStateを使用して更新します。

// Example of using state in a class component
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  incrementCount = () => {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.incrementCount}>Increment</button>
      </div>
    );
  }
}

結論

プロップスとステートはReactコンポーネントにおいてデータ管理のために使用される重要な概念です。プロップスは外部からのデータの受け渡しに使用され、ステートは内部でのデータの管理と更新に使用されます。これらの概念をうまく組み合わせることで、Reactアプリケーションを効果的に構築することができます。

終わり

この記事では、初心者大学生がReact Nextを理解するためのアウトプット資料です。
間違いや意見などコメントお待ちしております！