0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Reactを基本からまとめてみた【30】【import や constで{} を使う時使わない時】

Last updated at Posted at 2023-01-04

【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によりオブジェクトの一部を取り出し定数化することができる。

参考サイト

【React】import や constで{} を使う時使わない時の違い

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?