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

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

プロップス（Props）

外部から渡されるデータ
- プロップスは、親コンポーネントから子コンポーネントにデータを渡すためのものです。
- 親コンポーネントが子コンポーネントに情報を渡すことができ、これによりデータの共有が可能となります。
読み取り専用
- プロップスは子コンポーネント内で読み取り専用です。子コンポーネント内でプロップスを変更することはできません。
関数コンポーネントとクラスコンポーネントの両方で使用
- 関数コンポーネントでは、引数としてプロップスを受け取ります。
- クラスコンポーネントでは、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）

内部で管理されるデータ
- ステートは、コンポーネント内で管理される内部の状態データです。
- ステートはコンポーネントがその状態を変更できるようにするために使用されます。
変更可能
- ステートは変更可能で、setStateメソッドを使用して更新できます。
- ステートが変更されると、Reactは再レンダリングをトリガーし、UIが変更されます。
主にクラスコンポーネントで使用
- 関数コンポーネントでもステートを利用できるようになりましたが、クラスコンポーネントでの使用が主流です。
- クラスコンポーネントでは、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を理解するためのアウトプット資料です。
間違いや意見などコメントお待ちしております！

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

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

プロップス（Props）

ステート（State）

結論

終わり