export default 와 export 변수명 차이점

es6 에서 선언한 내용을 다른 곳에서 import 하기 위해 export 를 사용할 때가 있다.

그리고 이 때 export default 를 사용하는 경우와 name 이라고 선언한 내용을 반영하기 위해 

export name 과 같이 사용하는 경우가 있는데 차이점은 아래와 같다.

export default 를 사용하면 파일 전체를 가져올수 있으며 

import 시에 내가 원하는 이름으로 사용이 가능하다.

예시는 아래와 같다.

export 파일

export default {
	login() {
    	console.log('login')
    }
}

 

import 파일

// 아래 import 다음 이름(loginfunc)은 마음대로 지정 가능
import loginfunc from './exportfile'

loginfunc.login()

 

반면 export 다음 이름을 사용한 경우는 해당 변수만 export 하며 

import 시에 중괄호로 사용한 이름을 감싸서 그대로 가져와야한다.

export 파일

function named () => {
	console.log('kk')
}

export { named } 

 

import 파일

import { named } from './exportfile'

named()