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’;