Reactのコンポーネントの書き方とimportの{}、default指定を調べてみた
Reactにはコンポーネントの書き方がいろいろあるらしい…？
アローやdefaultやexportなど色々あって難しい。どれでも動くらしいですが、それぞれ意味があるらしく、どれがいいのかよくわからなったので調べてみました。
目次
1. コンポーネント関数の書き方
まずはそれぞれのコンポーネント関数の書き方をチェックしてみます。読み込み方も違ってくるようです。
1-1. 今までの書き方
従来の関数です。馴染みのある書き方ですね。
export function HogeHoge() {
return (
<div>中身</div>
)
}2-2. 新しい書き方
こんな感じで書くと何かと良いみたいです。
export const HogeHoge = () => {
return (
<div>中身</div>
)
}アロー記法で書いた関数なので一般的にアロー関数と言われているようです。色々調べると、細かい違いはあるようなのですが、乱暴な言い方をするとどちらもほとんど同じらしく、好きな方を統一して使ったらいいと言う感じでした。
ちなみに、exportをつけないとimportで読み込みできないらしい。他から読み込みせず、コンポーネント内でだけ使う関数を定義する場合はexportいらないってことですかね。
2. default指定と、import時の{}（波括弧・中括弧）について
importすると{}がついているときとついていないときがあるみたいです
// defaultがない場合
import {HogeHoge} from "HogeHoge"
// defaultがある場合
import HogeHoge from "HogeHoge"
何が違うのか調べたところ、コンポーネント側にdefaultがついているかどうかみたいです。defaultがついてなければ波括弧がいるみたいです。
2-1. 波括弧がいらない場合
前述のとおり、defaultがついてれば波括弧は必要ないようです。
コンポーネント内に複数の関数がある場合、一つの関数にdefaultをつければ「これをデフォルトで使うよ」という意味になるらしいです。
// 読み込むコンポーネント名と同じ
import HogeHoge from 'HogeHoge'
// 読み込むコンポーネント名と違う
import HogeHoge2 from 'HogeHoge'他には、defaultをつけたらimportの時に名前を自由に変えられるという違いもあるみたいです。でも勝手にコンポーネントと違う名前をつけちゃったら混乱しそうですね・・。
2-2. 波括弧がいる場合
defaultがついてなければ波括弧が必要のようです。
import { HogeHoge } from 'HogeHoge'こっちだと、基本的にimport先で名前を変えることはできないので、こっちのほうが混乱が少ないみたいです。じゃあdefaultついてないほうが良い気がしますね。
もし読み込み元で他のコンポーネントと名前が重複した場合はasで限定的に名前を変えることができるみたいですね。名前を変えるという意味ではdefault付きと同じですが、こっちのほうが「変えたよ！」ってのがわかりやすいからいいですね。
import { HogeHoge as HogeHoge2 } from 'HogeHoge'ということでアロー関数のdefaultなしを使うようにしようと思います。
3. 結論
関数の書き方はアロー関数で。defaultはつけない。import時は{}で囲む。個人的に調べた感じでは、これで統一するのがよさそうです。
export const HogeHoge = () => {
return (
<div>中身</div>
)
}import { HogeHoge } from 'HogeHoge'ちなみにここまでのimportやdefaultなどはReactの話ではなくて、JavascriptのES6の話みたいなんですが、主にReactで使うのであえてReactの話としました。また、Javascriptの話に集中するためにTypeScriptの要素は一切入れませんでした。
今回は以上です！