react開発においてよく見るnamed exportとdefault exportの違い

概要

reactのチュートリアルや、サンプルコードと実際の開発現場でreactのコードを触ってみて
1つ違いがありました。
何の違いかというと、
reactチュートリアルでは以下のようなdefault exportが使用され、

.jsx

export function App() {
  return (
    <p>テスト</p>
  );
}

export default App;

実際の開発現場では以下のようなnamed exportと呼ばれるものが使用されているという違いがありました。

.jsx

export const App = () => {
  return (
    <p>テスト</p>
  );
};

何となくそういうものかとやっていたのですが
いざ、チュートリアルなどを触ってみるとどちらがいいのかわからなかったので今回少し調べてみました。

default exportについて

default exportは1つのファイルに1つだけexportできます。そのため、exportするものを強制的に1つにできるので管理がしやすいのかなと感じました。
また、呼び出し側でimportするときに名前を自由にすることができるみたいです。

呼び出し元↓↓↓

.jsx

export function App() {
  return (
    <p>テスト</p>
  );
}

export default App;

呼び出し側↓↓↓

.jsx

import App from './App'; // これでもok
import SampleApp from './App'; これでもok

ただ、複数の人が触る開発現場で呼び出し側で名前を自由に設定できるのは少し怖い気もしました。

named exportについて

named exportは1つのファイル内で複数のexportを使用できます。
呼び出し側での呼び方はexportの名前じゃないといけないみたいです。

呼び出し元↓↓↓

.jsx

export function App() {
  return (
    <p>テスト</p>
  );
}

export default App;

呼び出し側↓↓↓

.jsx

import { App } from './App';

呼び出し側では{}をつけてimportする必要があります。

こちらであればcomponentsのみではなく、関数を集めたファイルなどを定義して呼び出すなど
できる幅が広くなるのかなと感じました

##　まとめ
ざっくり理解ですが、知りたいことを知れたのでスッキリしました。
他にも不明な部分は記事に起こしてみようと思います。