はじめに
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でコンポーネントを作成してみましょう。