コンポーネントのインポートとエクスポート

コンポーネントの魔法はその再利用性にあります。他のコンポーネントで構成されるコンポーネントを作成できます。しかし、コンポーネントをどんどんネストしていくと、それらを別々のファイルに分割し始めることが理にかなっていることがよくあります。これにより、ファイルを簡単にスキャンできる状態に保ち、コンポーネントをより多くの場所で再利用できます。

ルートコンポーネントファイル

最初のコンポーネントでは、Profileコンポーネントと、それをレンダリングするGalleryコンポーネントを作成しました：

これらは現在、この例ではルートコンポーネントファイル（App.jsという名前）にあります。ただし、設定によっては、ルートコンポーネントが別のファイルにある場合もあります。Next.jsのようなファイルベースのルーティングを使用するフレームワークでは、ページごとにルートコンポーネントが異なります。

コンポーネントのエクスポートとインポート

将来、ランディング画面を変更して科学書のリストを配置したい場合、またはすべてのプロファイルを別の場所に配置したい場合はどうすればよいでしょうか？GalleryとProfileをルートコンポーネントファイルから移動することは理にかなっています。これにより、それらはよりモジュール化され、他のファイルで再利用可能になります。コンポーネントは3つのステップで移動できます：

1. 作成：コンポーネントを配置する新しいJSファイルを作成します。
2. エクスポート：そのファイルから関数コンポーネントをエクスポートします（デフォルトまたは名前付きエクスポートを使用）。
3. インポート：コンポーネントを使用するファイルでインポートします（デフォルトまたは名前付きエクスポートをインポートするための対応する手法を使用）。

ここでは、ProfileとGalleryの両方がApp.jsから、Gallery.jsという新しいファイルに移動されました。これで、App.jsを変更してGalleryをGallery.jsからインポートできます：

この例が現在2つのコンポーネントファイルに分割されていることに注目してください：

1. Gallery.js:
   • 同じファイル内でのみ使用され、エクスポートされないProfileコンポーネントを定義します。
   • コンポーネントをGalleryとしてデフォルトエクスポートします。
2. App.js:
   • をGalleryとしてデフォルトインポートでGallery.jsからインポートします。
   • ルートのAppコンポーネントをデフォルトエクスポートします。

同じファイルから複数のコンポーネントをエクスポートおよびインポートする

ギャラリーではなく、単一のProfileだけを表示したい場合はどうすればよいでしょうか？Profileコンポーネントもエクスポートすることができます。しかし、Gallery.jsにはすでにデフォルトエクスポートがあり、2つのデフォルトエクスポートを持つことはできません。デフォルトエクスポートを持つ新しいファイルを作成するか、名前付きエクスポートを追加することができます。Profileのファイルはデフォルトエクスポートを1つしか持てませんが、名前付きエクスポートは多数持つことができます！

まず、エクスポートProfileをGallery.jsから名前付きエクスポート（defaultキーワードなし）を使用して行います：

次に、名前付きインポート（中括弧を使用）でProfileをGallery.jsからApp.jsにインポートします：

最後に、レンダリング<Profile />をAppコンポーネントから行います：

これでGallery.jsには2つのエクスポートがあります：デフォルトのGalleryエクスポートと、名前付きのProfileエクスポートです。App.jsは両方をインポートしています。この例で<Profile />を<Gallery />に編集して戻してみてください：

これで、デフォルトエクスポートと名前付きエクスポートを組み合わせて使用しています：

• Gallery.js：
  • コンポーネントProfileを名前付きエクスポートProfileとしてエクスポートします。
  • コンポーネントGalleryをデフォルトエクスポートとしてエクスポートします。
• App.js：
  • コンポーネントProfileを名前付きインポートProfileとしてGallery.jsからインポートします。
  • コンポーネントGalleryをデフォルトインポートとしてGallery.jsからインポートします。
  • ルートコンポーネントAppをデフォルトエクスポートとしてエクスポートします。

まとめ

このページでは以下のことを学びました：

• ルートコンポーネントファイルとは何か
• コンポーネントをインポートおよびエクスポートする方法
• デフォルトおよび名前付きのインポートとエクスポートをいつ、どのように使用するか
• 同じファイルから複数のコンポーネントをエクスポートする方法