😽

【React/Next.js】「export default」と「export」の違い

2023/06/22に公開

Next.js

今日はなんとく気になったタイトルについて調べました。

私はいつもコンポーネントを作成するときは、下記のようにアロー関数で書いています。

export const Hogehoge = () =>{

  returun(
      <></>
  )
}

だいたいはこの書き方でできていたのですが、
デフォルトで「index.js」や「App.js」に記述されているのは下記のとおり

function App(){

  returun(
      <></>
  )
}

export default App;

アロー関数を使っていないのは書き方の問題だけども、
defaultという単語が入っている。

他のコンポーネントでも一応こんな感じで使える

export default const Hogehoge = () =>{

  returun(
      <></>
  )
}

では「export const Hogehoge」と「export default consut Hogehoge」でなにが違うのか調べてみました。

1.importの書き方が違う

// export const Hogehogeの場合
import { Hogehoge } from "./hogehoge"

// export default const Hogehogeの場合
import Hogehoge from "./hogehoge"  //例1
import HogehogeFree from "./hogehoge" //例2

まずはimportの書き方が違います。
defaultなしの場合は{}が必須ですが、defaultありのほうは{}が不要です。
さらにdefaultありの場合は、import時に変数名を変えることができます。（例2参照）

2.渡せる数が違う

export defaultの場合
変数や定数、関数などの処理を１つの機能として渡す、いわゆるモジュールです。
　受け取るとき（importするとき）に指定するのもモジュール名の１つだけです。

exportの場合
　export { 変数名１, 変数名2, 変数名3 };のように変数や定数を複数渡すことができます。
　受け取るとき（importするとき）に指定するのは欲しい変数や定数です。
　不要なものは記載しなければimportされません。

// export const Hogehogeの場合
import { 変数名1, 変数名3 } from 'ファイルパス'

// export default const Hogehogeの場合
import モジュール名 from 'ファイルパス'

では、どちらがいいのか。

この記事には
defaultを使うと変数名がimport時に変えられてしまうので、のちのちやりにくいよということが書いてあります。

個人的に、今後もdefaultは最低限使わなくていいかなと感じました。

1.importの書き方が違う

2.渡せる数が違う

Discussion