[JS, TS] import, export, const 정보

초면

난 젠이야. 데뷔.eitches입니다.
최근에 React를 독학했어요.
자주import이렇게 쓰세요.

1. import firebase from 'firebase/app'
2. import { auth } from 'firebase/app'

저는 이게 Firebase와auth의 export가 있어서 import이 될 수 있다고 생각해요.
어떤 형식으로 export를 진행하면 어떤 형식으로 import을 진행할 수 있을까
애매하게 공부하고 있어 야 실현아!이럴 때 좀 막혀요.
이번에 얻은 지식을 비망록으로 남기다.

전제 코드

※ 번거로우니 ~/를 기점으로
firebase.utils.js
~/firebase.utils.js

import firebase from 'firebase/app'
import 'firebase/auth'

const provider = new firebase.auth.GoogleAuthProvider()

export const auth = firebase.auth()

export const signInWithGoogle = () => auth.signInWithPopup(provider)

export default firebase

import으로 호출

component.jsx
~/component.jsx

import React from 'react'
// 正しい参照方法
import firebase from '~/firebase.utils.js'
import { auth, signInWithGoogle } from '~/firebase.utils.js'

// 参照不可（export defaultのため {} は不要）
// import { firebase } from '~/firebase.utils.js

// 参照不可（export defaultではないので {} が必要）
// import auth from '~/firebase.utils.js'
// import signInWithGoogle from '~/firebase.utils.js'
 
// 参照不可（exportしていない）
// import provider from '~/firebase.utils.js'
// import { provider } from '~/firebase.utils.js'


const hoge = () => (
  // 正しい参照方法
  <button type='button' onClick={signInWithGoogle}>Text</button>
  
  // 参照不可（firebaseとsignInWithGoogleは独立している）
  // <button type='button' onClick={firebase.signInWithGoogle}>Text</button>
)

결론

export default XXX import XXX from '...'로 호출

export const YYY import { YYY } from '...'로 호출

export XXX 및 export default YYY 중 XXXとYYYは独立している=>XXX.YYY로 호출할 수 없음(상기 firebase.signInWithGoogle