JavaScript React プログラミング

Reactでpropsとstateのイメージをつかむ:初心者でもわかりやすく解説

 

はじめに

Reactは、Facebookが開発したJavaScriptライブラリであり、モダンなWebアプリケーションの開発において、広く使用されています。Reactには、propsとstateという2つの重要な概念があります。本記事では、Reactでpropsとstateのイメージをつかむための解説を行います。

 

propsとは?

propsは、Reactでコンポーネント間でデータを受け渡すための仕組みです。propsは、外部から渡されるデータであり、読み取り専用であるため、コンポーネント内で変更することができません。

 

propsのイメージ

propsは、親コンポーネントから子コンポーネントに渡されるデータのようなものです。以下のコードは、AppコンポーネントからHelloコンポーネントにnameというpropsを渡しています。

 

 App.js
function App() {
return (
<div>
<Hello name="John" />
</div>
);
}
function Hello(props) {
return <div>Hello, {props.name}!</div>;
}

この例では、AppコンポーネントからHelloコンポーネントにnameというpropsが渡され、Helloコンポーネントでは、props.nameを使用して、「Hello, John!」というテキストが表示されます。

 

stateとは?

stateは、Reactで動的なコンポーネントを実現するための仕組みです。stateは、コンポーネント内で変更することができ、変更されると再レンダリングが行われます。

 

stateのイメージ

stateは、コンポーネント内で管理される状態のようなものです。以下のコードは、Buttonコンポーネント内で、countというstateを定義しています。

 state
function Button() {
const [count, setCount] = useState(0);
function handleClick() {
setCount(count + 1);
}
return (
<div>
<button onClick={handleClick}>Count: {count}</button>
</div>
);
}

この例では、Buttonコンポーネント内でcountというstateを定義し、ボタンがクリックされるたびに、setCount関数を使用して、countの値を1増やしています。その結果、ボタンのラベルには、現在のcountの値が表示されます。

propsとstateの違い

propsとstateは、ともにReactのコンポーネント内で使用される重要な概念ですが、2つには以下のような違いがあります。

 

変更の可否

propsは、読み取り専用であり、外部からの変更はできません。一方、stateは、コンポーネント内で変更が可能であり、変更されると再レンダリングが行われます。

 

管理する場所

propsは、外部から渡されるデータであり、コンポーネント外部で管理されます。一方、stateは、コンポーネント内で管理されます。

 

役割

propsは、コンポーネント間でデータを受け渡すために使用されます。一方、stateは、コンポーネントの状態を管理するために使用されます。

 

まとめ

Reactでpropsとstateのイメージをつかむための解説を行いました。propsは、コンポーネント間でデータを受け渡すための仕組みであり、外部から渡されるデータです。一方、stateは、コンポーネント内で管理される状態のようなものであり、コンポーネント内で変更が可能です。propsとstateの違いについても解説しました。Reactを使用する上で、propsとstateの使い方を理解することは非常に重要です。初心者でもわかりやすい解説を参考にして、Reactでコンポーネントを作成してみましょう。

-JavaScript, React, プログラミング