More than 3 years have passed since last update.

Reactで{}(curly bracket or 中括弧 or 波括弧)をimportで使う理由

Last updated at 2020-05-30Posted at 2020-05-30

結論

ES6のexportには

の2種類が有り、Named Exportには{ } を付けないとimportできない。

に追加して

の2種類が有り、特定のオブジェクトをimportする際は{ }をつける。

最近 reactを勉強し始めて、よく{ }(中括弧）でimportしたりしなかったりする状況が散見され、「どんな基準で付けたり付けなかったりするの。。。？」となった。

なので調べてみたらReactの話ではなく、まずES6の話だった。

通常、他のファイルで何か関数か変数を使いたい時は

export default App;

とexportするが、この場合はdefault exportされているので

import App from './path/to/App';

とimportできる。

一方でnamed exportは

export const A = 25;

とdefaultを使わずにexportされ、importする際には

import {A} from './path/to/A';

のようにする。

「ふむふむ、なるほどexportにdefault付けるか付けないかで違うのか～」となっている所に、ふと自分のコードを見ると、default付けているcomponentにも{ }を付けてimportをしているではないか。

~~「Why Japanese People!?　規則性ないじゃないか！」~~

更に調べると、どうやら

Curly Braces are used to import single(specific) property, whereas the word without braces is import entire object form that file.

これは例えば

import React, { Component } from 'react';

てな感じで、

特定のオブジェクトをimportしたいときはそのオブジェクトに{ }をつけてやるとのこと。

なるほどね、解決！
めでたしめでたし