LoginSignup
15
13

More than 3 years have passed since last update.

export default とexport constの違い

Posted at

はじめに

それぞれ以下の 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 を使う方がいい
15
13
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15
13