【React】コンポーネントのimportとexportについて【JavaScript】

はじめに

　本記事は、プログラミング初学者が、学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。
　そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。
　間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。

コンポーネントのimportとexportについて

Reactではコンポーネントを分ける

Reactでは、1ファイル1コンポーネントになるように記述していき、importとexportをすることでそれらを組み合わせ、最終的な形にしていきます。
理由は以下の通りです。

• 何のための部品なのか明確にするため
• 管理しやすくするため
• 再利用するため

JavaScriptのモジュールと同様です。

importとexportの使い方

improtとexportはReactでは以下の方法で行います。

sample.js

 // デフォルトインポート
 // 関数名とファイルの相対パスを指定する
 import Sample from "./Sample";

 // デフォルトエクスポート
   // アロー関数の場合(rch : VSCode補完)
   const Sample = (props) => {
     return <h1>{props.sample}</h1>
   };
   export default Sample;
   // 名前付き関数の場合(rfc : VSCode補完)
   export default function Sample(props) {
     return <h1>{props.sample}</h1>
   };



 // 名前付きインポート
 import {Sample, Example} from './index';

 // 別名エクスポート
 // デフォルトエクスポートしたファイルに別の名前をつけてエクスポートする
 // Reactではエントリポイントのファイル(index.js)に記述する
 export {default as Sample} from './Sample';
 export {default as Example} from './Example';

別名エクスポートは、エントリポイントのファイル(index.js)に記述します。
エントリポイントに各子コンポーネントの別名エクスポートを記述することで、親コンポーネントでインポートする際に、名前付きインポートで一文にまとめることができ、可読性を高めることができます。

まとめ

• Reactでは、1ファイル1コンポーネントになるように記述していき、importとexportをすることでそれらを組み合わせ、最終的な形にする
• Reactでは、デフォルトインポート＆デフォルトエクスポート、名前付きインポート＆別名エクスポートが使用される
• 別名エクスポートをindex.jsに記述することで、親コンポーネントで名前付きインポートをすることができ記述量を減らすことができる