자바스크립트 import와 export 정의

📌 자바스크립트 내보내기, 가져오기

✅ Import

• import라는 키워드를 통해서 외부에 있는 JS 파일을 가져온다.

JS 파일은 파일 내 특정 내용을 Default export와 Named export 2개의 통로가 있다.

쉽게 정리해보자면, 우리는 흔히 자바스크립트 파일 안에서 (리액트, 뷰, 앵귤러 도 마찬가지) import 키워드와 export default 키워드를 자주 볼 수 있다.

 

주니아 개발자 입장에서는 전공자가 아니고서는 대게 인터넷 강의를 통해 코딩을 배우거나 혹은 사설학원 및 국비지원을 통해 코딩을 배우기 때문에 아무래도 하나하나 세세한 문법, 메서드, 키워드를 다루기보단 전체적인 흐름을 배우는 경우가 대다수이기 때문에 나 역시 import 키워드가 외부에서 파일을 가져오는 기능 을 가지고 있다고 받아들이기만 했지 정확히 깊게 살펴보진 않았다.

 

import는 위에서도 설명했듯이 외부에 있는 JavaScript 파일을 현재 내가 필요로 하는 파일에 가져오는 역할을 한다.

 

✅ Export

• Default export : 이름을 지정하지 않아도 상관없는 기본 통로
• Named export : 이름을 지정해야 하는 통로

Export는 크게 2가지의 경로가 있다. 즉, 내보내기 역할을 수행하는 Export 방법은 2가지라는 소리이다.

 

👉 export default

첫째, 우리가 가장 자주봐왔던 export default. 이것을 기본 경로(통로)라고 칭하겠다.

 

 

위 코드를 살펴보면, export default function getType(data){이하 코드}에서 getType이라는 이름이 삭제하고 내보내기 해도 로컬에서 정상적으로 작동한다. 그 이유는 export default 자체가 기본 내보내기 방식으로써 이름을 지정하지 않아도 상관없는 통로이기 때문이다.

 

👉 Named export

기본적으로 하나의 모듈에서 하나의 파일만 내보내기 가능한 export default와는 달리 Named export 즉, 이름을 가지고 있는 export 통로는 여러 개의 코드 자료를 동시에 내보낼 수 있다. 아래 코드를 보면 export 가 여러 개임을 알 수 있다.

 

 

✅ 정리