[Javascript] Named Export / export default

js파일에서 데이터나 함수를 외부파일에서 사용할때  export 로 내보내줘야한다.

export 와 export default 로 작성 되어있는 샘플을 흔히 볼 수 있는데

그 차이를 알아보려고 한다.

 

• export default : 기본 export
• 내보내는 JS파일에서 function 이름은 생략이 가능하다.
• 한가지 함수만 작성할 수 있다. 
• 가져오는 JS파일에서 import 함수명 부분은 다른 이름으로 변경해도 상관없다. 

  • // getRandom.js
    export default function () {
    	return Math.floor(Math.random() * 10)
    }
    
    // main.js
    import getRandom from './getRandom'

 

• export : named export
• 내보내는 JS파일에서 기본 export와는 다르게 function 이름은 반드시 입력해야한다.
• 가져오는 파일에서 함수명을 표기 해주어야한다. import { 함수명 }  from 'getRandom'
• default 와는 다르게 여러가지 함수를 포함할수있기 때문.
• export default function 도 1개까지 작성 가능하다.
• import * as 별칭  from './getRandom' 으로 별칭을 줄 수있고, console.log(R.random) 등으로 사용 가능하다.