export default とexport constの違い

はじめに

それぞれ以下の export になります。
・export default　→ default export
・export const 　→ named export

exportの書き方によって、import時の記載が変わってきます。
少し気になったので調べてみました。

書き方(export)

それぞれ以下のようなコードになります。（本記事はReactで記載します。）

default export

Test1Component.js

import React from "react";

const Test1Component = () => {
  return <div>Test1Component</div>;
};

export default Test1Component;

named export

Test2Component.js

import React from "react";

export const Test2Component = () => {
  return <div>Test2Component</div>;
};

書き方(import)

import時には、{}がつくかつかないかの違いがあります。

default export

App.js

import Test1Component from "./components/Test1Component";

named export

App.js

import { Test2Component } from "./components/Test2Component";

結論

default exportは、勝手に「default」という名前を付けてくれるnamed exportになるそう。
( default は予約後)
JavaScript: Default Exportは、値を「default」という名前でNamed Exportしている
ES2015 (ES6) の import や export (default)（React基礎講座4）

とりあえず以下を覚えておけば良さそう。

• export default したものを import するときには {} を使わない
• 1 ファイル内で、1 export defaultのみ(通常は export は複数使用できる)
• なので、1ファイル1コンポーネントであれば、 export default を使う方がいい