はじめに
前回は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
このような見慣れた形のほかにも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でエイリアスを使う
通常のexportでも実は自由に名称を変更できます。
App.jsx
// TestComponentという名称でSampleComponentを使う
import { TestComponent as SampleComponent } from "./components/SampleComponent"
まとめ
exportには単一の場合、default exportという違った書き方ができます。
しかしながら通常のexportがわかりやすいとおもうので通常のexportを使えば事足りると思います。