React import/exportについて

export名とimport名が違うのはなんで？？となったので調べたことをメモしておく。

import

①defaultでexportされているものについてはimport時にファイルパスさえあっていれば自由に名付けて良い。（当然同じ名前でも構わない）
import 〇〇 from 'ファイルのPath等'
import 『export時の名前』AS 〇〇 from 'ファイルのPath等'

②defaultではないものについては
import { 〇〇 } from 'ファイルのPath等'と記載する。
この際、export時と同じ名前を使用する必要がある。

③②で名前を変えたい時は、
import { 〇〇　AS つけたい名前 } from 'ファイルのPath等'で変更することができる。

export

default
・export 〇〇でファイル・変数を自由にexortできる。
・クラス名・変数名に関わらず、export default 〇〇で自由に名付けられる。（1ファイルにつき1つのみ）

以上、参考になれば幸いです。