React習得への道6

こんにちは！ジュンです！

今回も勉強したことをアウトプットしていきます。

今回は前章でも少し触れた関数コンポーネントについてです。

関数コンポーネントとは

改めて関数コンポーネントとは、「JSXを返すJavaScriptの関数として定義するコンポーネント」のことです。

コンポーネントを使う流れ

①コンポーネントを作る

②作ったコンポーネントをexportする

③exportされたコンポーネントを、使うコンポーネントファイルの中でimportする

④呼び出して利用する

①コンポーネントを作る

コンポーネントとして認識されるために、必ず関数名は大文字から始める。

関数名と同じファイルごとに分けて管理するのが良い。

（1つのファイルに複数のコンポーネントを定義することも可能。）

例：

function Hello() {
return <h1>Hello React</h1>;
}

const Hello=()=> {
return <h1>Hello React</h1>;
}

②作ったコンポーネントをexportする

exportとは、作ったコンポーネントを別のファイルで使えるようにするために必要なもの。

例：

Namedエクスポート

export {Hello};

もしくは、

defaultエクスポート

export default Hello;

ただし、defaultを使うときは、1つのファイルから1つのコンポーネントしかエクスポートすることができない。（記述しているファイルの代表コンポーネントしてエクスポートする。）

defaultを使うことで、エクスポートする際の名前を自由に決めることができるうえに、基本的にコンポーネントは「1ファイルにつき1つ」が多いためdefaultを使っても良い。

コンポーネントの定義とexportをまとめて行える。

例：

export const Hello=()=> {
return <h1>Hello React</h1>;
}

③exportされたコンポーネントを、使うコンポーネントファイルの中でimportする

※エクスポートする際に{}がいるかどうかの違いがある。

default exportを使った場合のimport:

import エクスポートする際に決めたコンポート名 from ‘エクスポートしたファイル名’;

Named exportを使った場合のimport:

import {コンポート名} from ‘エクスポートしたファイル名’;

④呼び出して利用する

<コンポーネント名 />で利用することができる。

例:

function App() {
return <Hello />
}

また、関数に引数が必要な場合はpropsという機能を使って、親コンポーネントから子コンポーネントを使ってデータを引き渡すことができる。

propsとは

コンポーネント同士が情報をやり取りする時に親コンポーネントから子コンポーネントへ値を渡せる機能。

propsがあることによって、コンポーネントは使いまわせるが、表示内容を動的に変更することができる。

親コンポーネントからHTML形式でpropsを渡し、子コンポーネントでJavaScriptの関数の引数として受け取ることができる。

例：

親コンポーネント

function App() {
return <Hello name=”React” />
}

子コンポーネント

function Hello(props) {
return <h1>Hello {props.name}</h1>
}

propsの重要ルール

①受け取りルール

②デフォルト値を設定できる。

①受け取りルール

子コンポーネントでデータを受け取る際2つの方法がある。

props = {name:”React”,age:3}というデータを親コンポーネントから渡されてると仮定する。

propsで丸ごと受け取る

function Hello(props) {
return <h1>Hello {props.name}</h1>
}

これはpropsを引数にしていることで、上記のpropsのデータを全て受け取るため、ドットで繋げて何のデータを受け取るかを指定している。

分割代入で受け取る

function Hello({name}) {
return <h1>Hello {name}</h1>
}

これは{}をつけることでJavaScriptの機能として、プロパティ名を指定することでその値を取得することができる。

基本的にどちらでも良いが、下記のような例があるため、使い分ける必要がある。

function UserCard({ name, age, email, address, isAdmin }) {
return (
<div>
<p>{name}</p>
<p>{age}</p>
<p>{email}</p>
</div>
)
}

この場合引数が長くなり、わかりにくくなる。

ちなみにデータを受け取る引数（今回でいうprops）は何でもいいため例えば

function Hello(A) {
return <h1>Hello {A.name}</h1>
}

のように記載しても問題はない。

また、JavaScriptで扱える値であれば文字列・数値・配列・オブジェクト・関数・JSXなど、自由に受け渡しできる。

②デフォルト値を設定できる。

function Hello({name=”名前未設定”}) {
return <h1>Hello {name}</h1>
}

上記のように記述することでデータがない際に自動で適用される。