【React】normal exportとdefault exportについて

reactのexport方法にはnormal exportとdefault exportの2種類ある。
違いは以下の点。

normal export

(exportするコンポーネント側の記述。今回はMainComponentというコンポーネントをexportしたいものとする。)

export const MainComponet = ( ) => { };

(importするコンポーネント側の記述)

import { MainComponet } from ‘./MainComponet’;

normal exportの場合、MainComponetをexportするときにconstの前にexportをつけ、importする時にそのコンポーネント名を{ }で囲む。
また、normal export の場合、importしたいコンポーネント名はexportしたコンポーネント名と一致していなければエラーになる。
なので、import { MainComponet } from ‘./MainComponet’;の中の{ MainComponet }は、{ SubComponet }のようにコンポーネント名を変更することはできない。

default export

(exportするコンポーネント側の記述。今回はMainComponentというコンポーネントをexportしたいものとする。)

const MainComponet = ( ) => { };

default export MainComponet;

(importするコンポーネント側の記述)

import MainComponet from ‘./MainComponet’;

default export の場合、MainComponetをexportするときは、default export MainComponet とし、const の前にはexportはつけない。
また、importするときは、{ }でimportするコンポーネントは囲まない。
さらに、importしたいコンポーネント名はMainComponetになっているが、変更することもできる。
なので、import MainComponet from ‘./MainComponet’;の中のimport MainComponetをimport Subcomponetとしても良い。

注意点

できるだけnormal exportを使用した方が良い。
理由は、default exportだと、import したいコンポーネント名が異なっていてもそのことに気づかなかったり、他のコンポーネントをimportしている可能性があるため。

as について

normal exportでコンポーネント名を変更したいときは、import 時にasを使用すると、コンポーネント名を変更することができる。

（MainComponentをSubComponentという名前に変更し、importしたいとき）

import { MainComponent as  SubComponent } from './MainComponet’;