はじめに

前回はReactの再レンダリングを学びました。最後にReactのexportの種類についてを書いていきたいと思います。

通常のexport

Reactではexportすることによって、コンポーネントの取り込みを行ってきました。

通常のexport

components/SampleComponent.jsx

export const SampleComponent = () => {
   //　実装
};

import側

App.jsx

import { SampleComponent } from "./components/SampleComponent"

ただし、分割代入のイメージと同じで、対象となるexportがないとエラーになります。

App.jsx

// TestComponentはないのでエラーになる
import { TestComponent } from "./components/SampleComponent"

このような見慣れた形のほかにもdefault exportというものも存在します。
export側は export defalut XXXと指定をし、import側は{}をつけずにimportをします。

default export

components/SampleComponent.jsx

const SampleComponent = () => {
   //　実装
};
export default SampleComponent;

import側

App.jsx

import SampleComponent from "./components/SampleComponent"

実はdafault exportの場合はSomeComponentでなくても大丈夫です。
これは、任意の名前をつけることができるので、対象となるものがなくてもエラーになりません。
import側

App.jsx

// TestComponentという名前でimportする
import TestComponent from "./components/SampleComponent"

ただし、1つのファイルで1回しかdefault exportは使えません。
※全てをまとめて一つとしてexportするイメージです

通常のexportでも実は自由に名称を変更できます。

App.jsx

// TestComponentという名称でSampleComponentを使う
import { TestComponent as SampleComponent } from "./components/SampleComponent"

exportには単一の場合、default exportという違った書き方ができます。
しかしながら通常のexportがわかりやすいとおもうので通常のexportを使えば事足りると思います。