React コンポーネントのexport方法

コンポーネントのexport方法は２種類ある

default export

DefaultExport.jsx

import React from "react";

export default DefaultExport = () => {
  return <h1>default export</h1>;
};

App.jsx

import React from "react";
import DefaultExport from "./DefaultExport";

export default function App() {
  return (
    <div>
      <DefaultExport />
    </div>
  );
}

DefaultExport.jsxをimportするときにコンポーネント名を自由に定義できる。
下記はコンポーネント名をTestとしてimportしてみたもの。

import React from "react";
import Test from "./DefaultExport";

export default function App() {
  return (
    <div>
      <Test />
    </div>
  );
}

named export

NamedExport.jsx

import React from "react";

export const NamedExport = () => {
  return <h1>named export</h1>;
};

これをApp.jsxでimportするためには、
App.jsx

import React from "react";
import { NamedExport } from "./NamedExport";

export default function App() {
  return (
    <div>
      <NamedExport />
    </div>
  );
}

import時にコンポーネント名を自由につけることはできず、
importするときは、exportした名前を{}でかこう必要がある。

結局どっちがいいの？

自由にコンポート名をつけることができない分、間違いなどに気づきやすいのはnamed export。
しかし、React.lazyを使う場合にはdefault exportしか対応していない。