【React】exportとexport defaultの違い

exportとexport defaultの違い

Reactコンポーネントをエクスポートする際に、exportとexport defaultの違いがあります。

1. export : このキーワードを使用して、モジュール内の関数、クラス、変数などを名前付きでエクスポートします。名前付きエクスポートでは、エクスポートされたコンポーネントをインポートする際に、エクスポートされた名前を使用してアクセスします。例えば、次のように使用します。

// MyComponent.js
export class MyComponent extends React.Component {
  // コンポーネントの定義
}

// 別のファイルでインポートする
import { MyComponent } from './MyComponent';

2. export default : このキーワードを使用して、モジュールのデフォルトエクスポートを定義します。デフォルトエクスポートでは、モジュール内で一つだけのエクスポートを行うことができます。名前がなく、インポート時に任意の名前を指定することができます。例えば、次のように使用します。

// MyComponent.js
class MyComponent extends React.Component {
  // コンポーネントの定義
}
export default MyComponent;

// 別のファイルでインポートする
import MyComponent from './MyComponent';

要約すると、exportは名前付きエクスポートを提供し、export defaultはデフォルトエクスポートを提供します。名前付きエクスポートは複数のエクスポートを可能にし、インポート時にエクスポートされた名前を使用します。一方、デフォルトエクスポートは一つのエクスポートのみを許可し、インポート時に自由な名前を使用します。