모듈이 뭐야~👀 대단한 사람들이지~🤗
이제 막 hello world를 출력하기 시작한 코딩 입문 왕초보는 하나의 js파일을 생성하면서 코딩을 시작한다. 가르쳐주는 이가 새로운 파일을 만들라고 하지 않는 이상 모든 기능을 그 한 js파일 안에서 구현해본다. 나도 그랬고, JavaScript가 "Hello world" 하고 세상에 처음 등장했을 때의 개발자들도 그랬다. 그 당시에는 자바스크립트로 만든 스크립트의 규모와 기능이 단순했기 때문에 그렇다.
하지만 만들어지는 스크립트들의 크기가 점점 커지고 복잡해지면서 모듈의 필요성이 대두되었다. 모듈 시스템이 2015년에 표준으로 등재되었고, 관련 문법들이 점차 진화하면서 대부분의 주요 브라우저와 Node.js와 같은 런타임에서 모듈 시스템을 지원하게 되었다.
1. 모듈(module)
그래서 모듈이 뭐냐면 그냥 '자바스크립트 파일 하나'를 모듈이라고 한다.
모든 함수나 변수같은 것들을 index.js파일 하나에 때려 넣으면 파일이 복잡하고 보기가 힘드니까 그것들을 모듈로 만들어서 따로 빼 놓고 index.js에서 끌어다 쓰는 것이다. 여기서 사용되는 것이 export와 import지시자이다. 모듈 파일에서 선언된 변수나 함수 앞에 export를 붙여서 수출하고 그 것을 불러올 모듈에서 import하여 수입해오는 것이다.
(여기서 쓴 수출, 수입 같은 말들은 그냥 내 전직이 수출입 하던 무역인간이었기 때문에 쓴 것이지 공식적인 용어는 아님을 알려드린다. 여기서도 수출입을 하다니.. 🤦🏻♀️)
// 📁 sayHi.js
export function sayHi(user) {
alert(`Hello, ${user}!`);
}
// 📁 index.js
import { sayHi } from './sayHi.js';
console.log(sayHi); // 함수
sayHi('개똥이'); // Hello, 개똥이!
2. export와 export default의 차이
🤓 : 오키오키 그건 너무 쉽고 알겠는데
export default라고 쓸때도 있고export만 쓸 때도 있던데요?
그리고 import 해올 때{중괄호} 쓰는 애랑안 쓰는 애는 무슨 차이임? 🧐
그것은 수출하는 모듈안에 수출할 개체(함수, 변수 등)가 하나만 있냐, 두 개 이상 있냐에 따라 달라진다.
그냥 export(named export)는 하나만 있을 때나 여러개 있을 때 모두 쓸 수 있지만, export default는 수출하는 모듈 안에 딱 하나만 들어있다는 것을 명확히 나타낼 때 쓸 수 있다. 수출 모듈에서 export default로 수출을 하면 수입 모듈에서 {중괄호} 없이 수입해올 수 있다.
위에 예시를 한번 더 우려먹자면 sayHi.js파일에 sayHi 함수 하나만 존재한다면 아래와 같이도 표현할 수 있다.
// 📁 sayHi.js
export default function sayHi(user) { // default로 수출함
alert(`Hello, ${user}!`);
}
// 📁 index.js
import sayHi from './sayHi.js'; // default로 수출했으니까 수입할 때 중괄호를 안 붙여도 된다.
console.log(sayHi); // 함수
sayHi('개똥이'); // Hello, 개똥이!reference
