【React】import や constで{} を使う時使わない時の違い
export defaultで公開してある(コンポーネントなど)
⇨ 中括弧なしでimportできる
exportで公開してある(関数やフックなど)
⇨ 中括弧をつけてimport
// import時
import hogehoge from 'fugafuga' //①
import { hogehoge } from 'fugafuga'//②
// const宣言時
const hoge = hogehogehoge//③
const { fuga } = fugafugafuga//④
import時(モジュール機能)
① fugafugaの中でexportする時、export defaultで公開してある。この場合、中括弧なしでimportできる。またimport時に任意の名前に変更可能である。 しかしexport default が使用できるのは1ファイルにつき1個まで。
② fugafugaの中でexportする時、exportで公開してある。この場合、中括弧をつけてimportする。またimport時の名前変更は{ xxx as yyy }とすることで可能。 export は1ファイルの中で何個使用しても問題ない。export default との併用もできる。
const宣言時
③ 通常の定数宣言である。任意内容を定義可能。
④ 分割代入といい fugafugafuga= {a:1, b:1, c:1}のような場合、const { a }=fugafugafugaによりオブジェクトの一部を取り出し定数化することができる。