はじめに
この記事は「🎄はじめてのアドベントカレンダー Advent Calendar 2023🎅」の18日目に参加しています。
今回はReactを学ぶ過程で出会ったPropsについてまとめてみました！
プログラミング初学者のため、内容に誤りがある可能性があります。間違いを見つけたら、ぜひ教えてください！
Propsとは何か？
Reactでは、親コンポーネントと子コンポーネントの間でデータをやり取りする必要がよくあります。Reactでのコンポーネント間のデータの受け渡しには「Props」を用います。
Propsとは、「プロパティ(性質・特徴)」を意味する名前です。
Reactでコンポーネントを使う際、そのコンポーネントに初期設定値のようなものを渡したい場合があります。
例えば、ボタンの文字を変更したり、色を変えたかったり、最初に表示するメッセージを設定したり。
この時に使うのがPropsです。親コンポーネントが子コンポーネントに値を渡す入れ物として機能します。
「親から渡す手紙」のようなものです。
子コンポーネントは渡されたPropsを見て、その通りの表示や動作をするという関係です。
このようにPropsを使うことで、コンポーネントに独自の性質や特徴を付加できます。
Propsの渡し方
Propsは以下の2つの方法で渡すことができます。
-
<コンポーネント名 props={propsオブジェクト}>の形式で直接渡す。 -
<コンポーネント名 {...propsオブジェクト}>の形式でスプレッド構文を使用して渡す。
方法 1: 直接Propsを渡す
この方法では、propsを個別にコンポーネントに渡します。各propはコンポーネントの属性として明示的に指定されます。
const ParentComponent = () => {
const user = {
name: 'John Doe',
age: 30,
};
// 直接propsを渡す
return <ChildComponent user={user} />;
};
const ChildComponent = ({ user }) => {
return (
<div>
<h1>{user.name}</h1>
<p>{user.age}</p>
</div>
);
};
この例では、ParentComponent から ChildComponent へ user という名前のpropを直接渡しています。
方法 2: スプレッド構文を使用してPropsを渡す
スプレッド構文を使用すると、オブジェクト内のすべてのプロパティをコンポーネントのpropsとして展開できます。これは特に、多くのpropsを渡す必要がある場合に便利です。
const ParentComponent = () => {
const user = {
name: 'John Doe',
age: 30,
};
// スプレッド構文を使用してpropsを渡す
return <ChildComponent {...user} />;
};
const ChildComponent = ({ name, age }) => {
return (
<div>
<h1>{name}</h1>
<p>{age}</p>
</div>
);
};
この例では、ParentComponent は user オブジェクトのすべてのプロパティを ChildComponent に渡しています。スプレッド構文 ({...user}) により、user オブジェクト内の各プロパティが個別のpropとして ChildComponent に渡されます。
Propsの受け取り方
子コンポーネントではpropsオブジェクトとしてPropsを受け取ります。このオブジェクトには、親コンポーネントから渡された全てのPropsが含まれています。
Propsの例
// 親コンポーネント
const ParentComponent = () => {
const user = {
name: 'John Doe',
age: 30,
};
return <ChildComponent user={user} />;
};
// 子コンポーネント
const ChildComponent = (props) => {
return (
<div>
<h1>{props.user.name}</h1>
<p>{props.user.age}</p>
</div>
);
};
// 分割代入でuserオブジェクトからnameとageのみ取り出すことも
const ChildComponent = ({user}) => {
const {name, age} = user;
return (
<div>
<h1>{name}</h1>
<p>{age}</p>
</div>
);
};
この例では、ParentComponentがChildComponentにuserというPropsを渡しています。ChildComponentはこのPropsを使ってユーザーの名前と年齢を表示しています。
分割代入を使用しuserオブジェクトからnameとageのみ取り出すこともできます。
//
const ChildComponent = ({user}) => {
const {name, age} = user;
return (
<div>
<h1>{name}</h1>
<p>{age}</p>
</div>
);
};
Propsの特性
Propsは読み取り専用です。親コンポーネントから子コンポーネントへ一方通行でしかデータを渡すことはできません。
子コンポーネントはPropsを通じてデータを受取ることができますが、逆に親コンポーネントにデータを渡すことはできません。
つまり、データの流れは親 → 子 の一方向に限られています。この一方向のデータフローがPropsの大きな特徴です。
これは何故かというと、データの変更を明確なルールで制限することで、思わぬエラーや混乱が起きないようにする為です。
これによりコンポーネント間でのデータの受け渡しが明確になり、予期しない副作用を防ぐことができます
では、データの変更はどうするのかというと、Reactにはstateという機能があり、こちらを使ってデータの変更を実装します。stateを使えば、データ変更のタイミングと方法をコントロールできます。
つまり、Propsとstateにはそれぞれ違う役割があり、Propsはデータの固定/読み取り、stateはデータの変更/更新 を担当するという感じです。
まとめ
Reactを学ぶ上でPropsを理解することはとても大切だと学べました。これからもReactの学習を続けていきたいです！
参考文献