中括弧{}がいる時といらん時
| {}がいる時 | {}がいらんとき |
|---|---|
| exportの時 | export defaultの時 |
「importの中括弧が必要な時/不要な時の違い」を理解するには、exportとexpor defaultの違いについて知る必要がある。
exportのdefaultがある時とない時の違い
| export文 | import時の{} | import時の名前 | 使用回数 |
|---|---|---|---|
| デフォルトexport | 不要 | 好きな名前 | 一ファイルにつき一回まで |
| 名前つきexport | 必要 | 定義した時のコンポーネント名（asを使って名前変更可能） | 何回でも |
使用例
| export文 | import文 | 備考 |
|---|---|---|
| export default Button(); | import Submit from ‘components/Button.js’; | Submitという名前でインポートしているが、別にAppleとかでもいい。 |
| export Button(); | import { Button } from ‘components/Button.js’; | Buttonでexportしたので、呼び出し時もButton |
デフォルトエクスポートと名前付きエクスポートの使い分け
どちらを使うにしても、意味がわかりやすい名前をつけること。
補足（よくある使い分け）
ファイルがコンポーネントを 1 つだけエクスポートする場合はデフォルトエクスポートが、複数のコンポーネントや値をエクスポートする場合は名前付きエクスポートがよく使われます。どちらのコーディングスタイルが好みの場合でも、コンポーネントやそれが入るファイルには、常に意味の通った名前を付けるようにしてください。
引用（https://ja.react.dev/learn/importing-and-exporting-components）