defaultとexport defaultの違い

はじめに

最近Reactを勉強していますが、exportとexport defaultによく惑わされるので、違いを整理しました。
※あくまでできるかできないかの整理となりますので、実際のプロジェクトでこういった書き方がされているかは存じ上げません。

概要

No.	項目	名前付きエクスポート （export）	デフォルトエクスポート （export default）
1	import時の{ }の必要性	○	×
2	エイリアスの可否	○	○
3	１ファイルからの複数エクスポート可否	○	△

1. import時の{ }の必要性

名前付きエクスポート

FruitsBasket.jsx

export const FruitsBasket = () => <div>FruitsBasket🧺</div>

App.jsx

import { FruitsBasket } from "./FruitsBasket"; 🙆‍♀️ { } が必要

import FruitsBasket from "./FruitsBasket";  🙅‍♀️　 { } をつけていない


const App = () => <FruitsBasket />

デフォルトエクスポート

FruitsBasket.jsx

const FruitsBasket = () => <div>FruitsBasket🧺</div>
export default FruitsBasket

App.jsx

import FruitsBasket from "./FruitsBasket"; 🙆‍♀️ { } は不要

import { FruitsBasket } from "./FruitsBasket"; 🙅‍♀️　 { } をつけている

const App = () => <FruitsBasket />

なお、下記はNG🙅‍♀️

FruitsBasket.jsx

export default const FruitsBasket = () => <div>FruitsBasket🧺</div>

【参考】

2. エイリアスの可否

名前付きエクスポート

FruitsBasket.jsx

export const FruitsBasket = () => <div>FruitsBasket🧺</div>

App.jsx

import { FruitsBasket as BreadBasket } from "./FruitsBasket"; 🙆‍♀️ asでrenameできる

import BreadBasket from "./FruitsBasket"; 🙅‍♀️ ダイレクトにはrenameできない

const App = () => <BreadBasket />

デフォルトエクスポート

FruitsBasket.jsx

const FruitsBasket = () => <div>FruitsBasket🧺</div>
export default FruitsBasket

App.jsx

import BreadBasket from "./FruitsBasket"; 🙆‍♀️ ダイレクトにrenameできる

import FruitsBasket as BreadBasket from "./FruitsBasket"; 🙅‍♀️　　asを使用したrenameはできない

const App = () => <BreadBasket />

3. 1ファイルからの複数エクスポート可否

名前付きエクスポート

１つずつエクスポートする

FruitsBasket.jsx

export const apple = 'apple🍎'
export const orange = 'orange🍊'
export const banana = 'banana🍌'

App.jsx

import { apple, orange, banana } from './FruitsBasket';

const App = () => {
  return (
    <>
      <p>{apple}</p>
      <p>{orange}</p>
      <p>{banana}</p>
    </>
  )
}

まとめてオブジェクトでエクスポートする

FruitsBasket.jsx

const apple = 'apple🍎';
const orange = 'orange🍊';
const banana = 'banana🍌';

export const fruits = { apple, orange, banana }

App.jsx

import { fruits } from './FruitsBasket';

const App = () => {
  return (
    <>
      <p>{fruits.apple}</p>
      <p>{fruits.orange}</p>
      <p>{fruits.banana}</p>
    </>
  );
}

まとめて配列でエクスポートする

FruitsBasket.jsx

const apple = 'apple🍎';
const orange = 'orange🍊';
const banana = 'banana🍌';

export const fruits = [ apple, orange, banana ]

App.jsx

import { fruits } from './FruitsBasket';

const App = () => {
  return (
    <>
      <p>{fruits[0]}</p>
      <p>{fruits[1]}</p>
      <p>{fruits[2]}</p>
    </>
  );
}

デフォルトエクスポート

・複数をそのままエクスポートすることはできない（export defaultは１ファイルにつき１つだけ）
・オブジェクト or 配列に格納すれば可能

FruitsBasket.jsx

// エクスポートする側
const apple = 'apple🍎';
const orange = 'orange🍊';
const banana = 'banana🍌';

export default apple, orange, banana 🙅‍♀️　　複数をそのままexportはできない

まとめてオブジェクトでexportする

FruitsBasket.jsx

const apple = 'apple🍎';
const orange = 'orange🍊';
const banana = 'banana🍌';

const fruits = {apple, orange, banana}
export default fruits

App.jsx

import fruits from './FruitsBasket';　👈 { } は不要

const App = () => {
  return (
    <>
      <p>{fruits.apple}</p>
      <p>{fruits.orange}</p>
      <p>{fruits.banana}</p>
    </>
  );
}

まとめて配列でexportする

FruitsBasket.jsx

const apple = 'apple🍎';
const orange = 'orange🍊';
const banana = 'banana🍌';

const fruits = [apple, orange, banana]
export default fruits

App.jsx

import fruits from './FruitsBasket'; 👈 { } は不要

const App = () => {
  return (
    <>
      <p>{fruits[0]}</p>
      <p>{fruits[1]}</p>
      <p>{fruits[2]}</p>
    </>
  );
}

両方を同時に使用する

exportとdefault exportの両方を１つのファイル内で使用することは可能

FruitsBasket.jsx

const apple = 'apple🍎';
const orange = 'orange🍊';
const banana = 'banana🍌';
const fruits = [apple, orange, banana]

export const FruitsBasket = () => <div>FruitsBasket🧺</div>
export default fruits

App.jsx

import fruits, { FruitsBasket } from './FruitsBasket'; 🙆‍♀️ { }のない方を前に書く
import { FruitsBasket }, fruits from './FruitsBasket'; 🙅‍♀️ { }のある方を先に書くのはNG

const App = () => {
  return (
    <>
      <FruitsBasket />
      <p>{fruits[0]}</p>
      <p>{fruits[1]}</p>
      <p>{fruits[2]}</p>
    </>
  );
}

参考