react import 波括弧{}あるないの違い

はじめに

react学習やオリジナルアプリの実装で、疑問に持った人必ずいるであろうという内容です。
それは、なんでimport文に{}がある時とない時があるん？？
こんな疑問持っている人少なくないんじゃないですか??😎
なので、今回復習も含めこの記事を書きました！

インポートとエクスポート

本題に入る前に、インポートとエクスポートの概要を知っておくと内容が入りやすいと思いますので、ここではインポート/エクスポートについて軽く触れておきます！

インポート

インポートとは、外部のコンポーネントを取り込む仕組み。
つまり、他のファイルから必要な関数や変数(コンポーネント)を取り込むってことです！

エクスポート

エクスポートとは、あるコンポーネントを外部でも使えるようにする仕組み。
つまり、あるファイルで定義した関数や変数を他のファイルでも使えるように外に出すことです。

デフォルトエクスポートと名前付きエクスポート

デフォルトエクスポート

デフォルトエクスポートとは、主にメインのコンポーネントで使われて、
一つの主要な関数や値をエクスポートします。

エクスポート側(モジュール)

// MyComponent.js
const MyComponent = () => {
  return <div>Hello, World!</div>
};

export default MyComponent;

インポート側
デフォルトエクスポートをインポートする場合は、波括弧{}は使いません。

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

上記ではMyComponentという名前でインポートしましたが、他の名前に変えることが可能。

// App.js
import AnyNameYouLike from './MyComponent';

名前付きエクスポート

名前付きエクスポートは、そのファイル内で補助的な役割を果たすコンポーネントや関数のこと。

エクスポート側(モジュール)

// MyComponent.js
export const MyComponent = () => {
  return <div>Hello, World!</div>;
};

また、一つのファイル名で複数の名前付きエクスポートが可能！

// utilities.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

インポート側
名前付きエクスポートをインポートする際、波括弧{}を使ってインポートします。
エクスポート側の名前とインポート側の名前は合致していなければなりません。
だから名前付きエクスポートと呼ばれているのです！

// App.js
import { MyComponent } from './MyComponent';

もし複数のエクスポートがある場合、必要なものだけをインポートすることが可能。

// App.js
import { add, subtract } from './utilities';

以下、デフォルトエクスポート(波括弧なし)と名前付きエクスポート(波括弧あり)の表です。

また、それぞれの使いどころや特徴についても表でまとめました。
以下の通りです！

終わり

・デフォルトエクスポートの場合は、import時に波括弧{}をつけない。
・名前付きエクスポートの場合は、import時に波括弧{}をつける。

これで、波括弧のあるないの違いがわかりましたでしょうか？😎
実務で、もしかしたらルールによってはどっちかに統一した方が混乱が避けれるという場合もありそうと個人的に思いました！