【備忘録】コンポーネントのエクスポートの書き方

やりたいこと

別ファイルをインポートしたいけど、書き方をド忘れしたので振り返りました。

実装

書き方は2パターンあります。

export default 関数名とするパターン

インポート先はimport 関数名 from 'ファイルパス'と書く

メリット

• インポート先の書き方はシンプルになる

デメリット

• 1ファイル2関数の場合、インポートできるのは1関数のみになる

App.tsx

function App() {
  return (
    <>
    </>
  );
}

export default App;

export function 関数名とするパターン

インポート先はimport { 関数名 } from 'ファイルパス'と書く

メリット

• import { 関数名 as 任意の名前 } from 'ファイルパス'と名前をカスタマイズできる
• 1ファイル2関数の場合、どちらの関数もインポートできる

デメリット

• インポートの書き方が煩雑

Button.tsx

export function Button() {
  return (
    <>
    </>
  )
}

まとめ

• コンポーネントなど1関数で完結する → export default 関数名
• ボタンなど複製する可能性があるパーツ → export function 関数名