Reactにおけるコンポーネントのname exportとdefault exportの違いと使い方と解説

name export と default exportの簡単な説明

Reactにおいて、コンポーネントのエクスポートには2つの主要な方法があります。name export（名前付きエクスポート）とdefault export（デフォルトエクスポート）です。

• Name export: 名前付きエクスポートは、コンポーネントを個別のエクスポートとして指定する方法です。コンポーネントごとに名前を付けてエクスポートし、他のモジュールでインポートする際には、同じ名前を使用します。

// Button.js
export const PrimaryButton = () => {
  // プライマリボタンの実装
}

export const SecondaryButton = () => {
  // セカンダリボタンの実装
}

• Default export: デフォルトエクスポートは、1つのコンポーネントをデフォルトのエクスポートとしてマークする方法です。他のモジュールでインポートする際には、任意の名前を使用できます。

// Button2.js
const PrimaryButton = () => {
  // プライマリボタンの実装
}

export default PrimaryButton;

name exportを使うメリット

• インポート時に明示的にコンポーネントを指定できるため、コードの可読性が向上します。
• 名前付きエクスポートは、他のモジュールから個別のコンポーネントを選択的にインポートすることができます。

// App.js
import { PrimaryButton } from './Button';

const App = () => {
  return (
    <div>
      <PrimaryButton />
    </div>
  );
}

default exportを使うメリット

• インポート時に任意の名前を使用できるため、コードの柔軟性が向上します。
• モジュールが単一のコンポーネントをエクスポートする場合、default exportを使用すると便利です。

// App.js
import Button from './Button';

const App = () => {
  return (
    <div>
      <Button />
    </div>
  );
}

結論

Reactにおけるコンポーネントのエクスポートには、name exportとdefault exportの2つの方法があります。name exportは明示的で個別のコンポーネントのエクスポートに適しており、default exportは柔軟性があり単一のコンポーネントのエクスポートに適しています。使用する場面に応じて適切な方法を選択することが重要です。適切なエクスポート方法を選ぶことで、コードの可読性と柔軟性を向上させることができます。