자~ 1탄에 이어 드디어 본론으로 들어가도록 하겠다.
필자가 궁금해 하던 그 주제다.
01. 모듈의 종류
먼저, 우리가 두 가지의 차이에 알기에 앞서 자바스크립트 상의 모듈의 종류에 대해 짚고 넘어가야 한다.
모듈은 크게 두 종류다.
복수의 함수가 있는 라이브러리 형태의 모듈(위 예시의 say.js)
개체 하나만 선언되어있는 모듈(아래의 user.js. class User 하나만 내보내기 함)
대개는 두 번째 방식으로 모듈을 만드는 걸 선호하기 때문에 함수, 클래스, 변수 등의 개체는 전용 모듈 안에 구현된다. 필자 역시 여태 두 번째 방식으로만 모듈을 구성해 왔기에 결국 무지성의 export defaults를 하단에 깔아놓은 것이다.
그런데 이렇게 모듈을 만들다 보면 자연스레 파일 개수가 많아질 수밖에 없다. 그렇더라도 모듈 이름을 잘 지어주고, 폴더에 파일을 잘 나눠 프로젝트를 구성하면 코드 탐색이 어렵지 않으므로 이는 전혀 문제가 되지 않는다.
02. export default는 문법?
그렇다. 필자 역시 처음에 이 부분이 문법적인 부분이라고는 전혀 생각하지 못했다. 그런데 알고보니 이해가 잘 되었다. 모듈은 export default라는 특별한 문법을 지원한다. export default를 사용하면 '해당 모듈엔 개체가 하나만 있다’는 사실을 명확히 나태낼 수 있다.
내보내고자 하는 개체 앞에 export default를 붙여보자.
// 📁 user.js
export default class User { // export 옆에 'default'를 추가해보았다.
constructor(name) {
this.name = name;
}
}파일 하나엔 대개 export default가 하나만 있다.
이렇게 default를 붙여서 모듈을 내보내면 중괄호 {} 없이 모듈을 가져올 수 있다. 즉, import할 때 뒤에 중괄호 없이 가져올 수 있다는 것이다. 다음은 필자의 프로젝트 vsc 코드다.
여기 보면 익스포트 디폴트 문법을 적었다.
이후 해당 컴포넌트를 다시 꺼내서 사용하기 위해 임포트 해 봤다.
보이시는가? 임포트 문법에 따로 중괄호를 넣어주지 않았다. 다시 중괄호를 넣어보면 이렇게 오류가 발생한다.
즉, 파일을 불러오지 못 하는 것이다. 따라서 중괄호를 빼 줘야만 하는 문법적인 차이가 존재한다. 물론, 이런 실수가 주니어 때 많다고 하니 미리 숙지해 둘 필요가 있다.
named export 한 모듈을 가져오려면 중괄호가 필요하고, default export 한 모듈을 가져오려면 중괄호가 필요하지 않다는 걸 기억해 실수를 방지합시다!
사실 named export와 default export를 같은 모듈에서 동시에 사용해도 문제는 없다. 그런데 실무에선 이렇게 섞어 쓰는 사례가 흔치 않다고 한다. 한 파일엔 named export나 default export 둘 중 하나만 사용하는 것이 권장된다.
파일당 최대 하나의 default export가 있을 수 있으므로 내보낼 개체엔 이름이 없어도 괜찮다.
이상 무지성의 시간이 잠시나마 덜어진 것 같아 속이 편해졌다. 이렇게 무지성으로 알던 것들을 하나 씩 채워나갈 수 있도록 앞으로도 무지성 시리즈는 연재해 나갈 예정이다.
그러면 지성인이 될 때까지 다시 또 돌아오겠다.
