React課題3 調べたこと ✏️

こんにちは、はるです.

所属している「もりけん塾」でReact課題に取り組んでいます.
問題文やレビュー内容は非公開なので、課題で調べたことをまとめることにしました.

初心者の学習ノートなので、認識の間違えている点がありましたらお問い合わせからご指摘いただけるとうれしいです.

今回は、課題2と課題3で調べたこと合作です✏️

子コンポーネント
props
まとめ

子コンポーネント

親コンポーネントから子コンポーネントをimportして使用する.
Reactアプリをrenderする時は親を実行すれば、子も一緒に実行される.

//Parent.js

import Child from './Child';

export default function App() {
　return(
　　<div>
　　　親のコンポーネントの中に子コンポーネントがinできる
　　　<Child /> //これ
　　</div>
　)
}

props

propsとは、コンポーネントにおいて、親から子へ値を渡す時の窓口になるもの.

propsの基本

コンポーネント側にpropsを受け取るための引数を用意する.
propsを通じて、送られてきた値を受け取ることができる.
今回はgreetingという名前がついている(自由に決めることができるが、キャメルケースにするのが一般的 camelCase )

function Child(props) {
　return (
　　<p>{props.greeting}</p>
　);
}

renderする側やコンポーネントの親側で、上記で指定した名前を通じて値を送ることができる.

function Parent() {
　const message = 'こんにちは！';

　return (
　　<div>
　　　<Child greeting={message} /> // message = 'こんにちは'が送られる.
　　</div>
　);
}

値に““を使うとすべて文字列として渡る.
数字を渡したい時は{123} など、 { }構文を使って配列、オブジェクト、関数も渡すことができる.

また、複数の値を渡したい時は、列挙することもできる.

return (
　　<div>
　　　<Child name="hoge" greeting="こんにちは" /> //複数列挙した例
　　</div>
);

コンポーネントに props を渡す – React

The library for web and native user interfaces

分割代入

propsもvanilla JavaScript同様に分割代入が使用できる.

function Child({greeting}) {
　return (
　　<p>{greeting}</p>
　);
}

さらに規定値を宣言することもできて、親からpropsとして値が渡ってこなかった場合は規定値が使用されます.

function Child({greeting = 'おはようございます'}) {
　return (
　　<p>{greeting}</p>
　);
}

この例だと、親で<Child />としてpropsなしで使用した場合は、おはようございますと表示される.

変更不可

propsはあくまで窓口であり、受け取った値をコンポーネント内で変更することができない.
コンポーネントに渡されたprops（プロパティ）は、そのコンポーネント内で変更すべきではなく、実際にエラーが出る.

「不変性の原則」とも呼ばれ、コンポーネントが外部から受け取ったデータを直接変更しないことを保証する.

これはどういうことか.

例えばParentコンポーネントからChildコンポーネントにmessageとしてpropsを渡す場合で説明してみる.

//Parent.js

import Child from './Child';

function Parent() {
　return (
　　<div>
　　　<ChildComponent message="初期メッセージ" /> //propsとして値を渡す
　　</div>
　);
}

export default Parent;

// Child.js

function Child(props) {
　// このようにpropsを変更することはできません（Reactの原則に反する）
　// props.message = "変更されたメッセージ";

　return <h1>{props.message}</h1>;
}

export default Child;

上記のコメントアウトに書いたままですが、受け取ったpropsをChildコンポーネント下で変更することはできない.

渡された値はそのまま使用する✏️