Reactを使っていると「Props（プロパティ）」という言葉を耳にすることが多いのではないでしょうか？PropsはReactコンポーネント間でデータをやり取りするための重要な仕組みです。特に、複数のコンポーネントがある場合や、親コンポーネントから子コンポーネントにデータを受け渡したいときに役立ちます。
本記事では、Propsの基礎から実践的な使い方までをわかりやすく解説し、Propsの理解を深めていきましょう。
Propsとは？
ReactのProps（Propertiesの略）は、親コンポーネントから子コンポーネントにデータを渡すための仕組みです。通常、コンポーネント間でデータを共有する際に使われ、親から子への一方向のデータフロー（one-way data flow）を特徴としています。Propsはあくまで「受け取るだけ」のデータであり、子コンポーネントで直接変更することはできません。
例えば、親コンポーネントが「ユーザー名」という情報を持っているとき、子コンポーネントにその名前を渡して表示する場合にPropsを使います。こうすることで、親の状態が変わった際に、子の表示も自動で更新されるというメリットがあります。
まとめると、以下のような特徴があるね！
Propsの特徴
- 読み取り専用：子コンポーネントで変更できません
- 親から子へのデータフロー：双方向ではなく一方向
- データ型の自由さ：数値、文字列、配列、関数などさまざまなデータ型が渡せます
基本的なPropsの使い方
まずは、簡単なPropsの使い方を見てみましょう。以下の例では、親コンポーネント「App」から、子コンポーネント「Hello」に名前を渡し、それを表示します。
文字列を渡したい場合
App.js
import React from 'react';
import Hello from './Hello';
function App() {
return (
<div className="App">
<Hello name="ゆーや" />
</div>
);
}
export default App;
Helloコンポーネントを読み込んで、表示する際に「name=”ゆーや”」のようにプロパティを持たせてあげます！「name」という名前を忘れずに！
Hello.js
import React from 'react';
function Hello(props) {
return <h1>Hello, {props.name}!</h1>;
}
export default Hello;一方、Helloコンポーネント側では、Hello(props)と引数を持たせて定義します！
そうすると、props.nameという形でAppコンポーネントで定義した「name」の値を受け取れます！
数値を渡したい場合
App.js
import React from 'react';
import Hello from './Hello';
function App() {
return (
<div className="App">
<Hello num={100} />
</div>
);
}
export default App;
{}構文を使うことで、JavaScriptで表現できるものすべてを子コンポーネントに渡すことができます！
Hello.js
import React from 'react';
function Hello(props) {
return <h1>{props.num}円頂戴！</h1>;
}
export default Hello;簡潔な記法（オブジェクトデストラクチャリング）
サンプルのコードではprops.nameのようにと記述していますが、毎回propsを使うのは少し冗長に感じられるかもしれません。そこで、オブジェクトデストラクチャリングという記法を使って、コードをさらに簡潔に書くことができます。
App.js
import React from 'react';
import Hello from './Hello';
function App() {
return (
<div className="App">
<Hello name="ゆーや" />
</div>
);
}
export default App;
こちらは変わらず！
Hello.js
import React from 'react';
function Hello({name}) {
return <h1>Hello, {name}!</h1>;
}
export default Hello;引数に注目！{}内に受け取る変数名を書いておけば、
その変数にアクセスする際にprops.nameじゃなくて、nameだけでよくなるよ！
複雑になるととても便利に感じるので、慣れておこう！
複数のPropsを渡す
Propsは1つだけでなく、複数のデータを一度に渡すことができます。例えば、名前と年齢を渡してみましょう。
App.js
import React from 'react';
import Hello from './Hello';
function App() {
return (
<div className="App">
<Hello name="ゆーや" age={30}/>
</div>
);
}
export default App;
複数のプロパティを渡したいときは、単純にHelloコンポーネントに渡すプロパティを増やせばよいね！
Hello.js
import React from 'react';
function Hello({name, age}) {
return <h1>{name}さんは{age}歳です!</h1>;
}
export default Hello;受け取る時は全部の変数名を受け取ることを忘れずに！
まとめ
Propsは、Reactにおいてコンポーネント間のデータ伝達を担う重要な仕組みです。親コンポーネントから子コンポーネントへ、読み取り専用のデータとしてPropsを渡すことで、コンポーネント間の結合度を低く保ちながら、データを共有することができます。また、デフォルト値の設定や関数の受け渡し、Propsを使ったコンポーネントの再利用によって、Reactアプリケーションを効率的に構築することが可能です。
コメント