내보내기(export , exports, export default) 가져오기(import, require)

export 는 javascript 모듈에서 함수, 객체, 원시값을 내보낼 때 사용

exports 는 모듈에서 함수, 객체, 원시값을 객체의 형태로 내보낼 때 사용

exports default 는 분리되어 있는 파일 내 내보낼 하나의 고정된 값만 내보낼 때 사용

export

export로 내보내기

require 사용해서 가져오기

import 사용해서 가져오기

결과 (require와 import로 가져온 값은 같음)

exports

exports로 내보내기

require 사용해서 가져오기

import 사용해서 가져오기

결과 (require와 import로 가져온 값은 같음)

결론 (export와 exports의 차이)

export는 내보낼 변수 하나하나의 값을 선언하여 내보내며 exports는 exports객체를 내보내므로 객체의 프로퍼티 형태로 내보낸다.

---

export default 

내보내기

require로 가져오기

결과

가져온 importTest 변수는 module 객체가 할당되어 있다.
module 객체에는 export default 값으로 정한 a의 값만 있다.
나머지 b, c, d 값은 가져올 수 없다.

내보내기

import로 가져오기

결과

역시 export default 로 내보낸 a 값만이 importTest변수에 할당 되었다

 

결론

export default는 내보낸 값만 가져올 수 있다.

그리고 가져올 때
require와 import의 차이는 require는 내보낸 값이 module 객체에 담겨 가져오며

{ defalut : 'hello', .. 나머지 다른 것들 } // 이런식으로 가져옴

import 는 값 자체를 가져온다.

---

여담

import와 require

• 둘 다 모듈 키워드, 외부 파일이나 라이브러리를 불러올 때 사용한다. 
• require는 NodeJS에서 사용되는 CommonJS 키워드, import는 ES2015에서 새로 도입된 키워드 
• Babel같은 ES6 코드 변환 도구를 사용할 수 없다면 require 키워드를 사용해야 한다. 

최근 ES6(ES2015) 모듈 시스템인 import가 많이 사용되고 있지만, 아직까지는 import 키워드가 100% 대체되어 사용될 수 없습니다. <script> 태그를 사용하는 브라우저 환경과, NodeJS에서도 CommonJS를 기본 모듈 시스템으로 채택하고 있기 때문에, Babel과 같은 ES6 코드를 변환(transpile)해주는 도구를 사용할 수 없는 경우에는 require 키워드를 사용해야 합니다.

출처: https://oizys.tistory.com/10 [우당탕탕 개발:티스토리]

https://velog.io/@jch9537/Javascript-export-default