[Javascript] module export, import, 모듈 이름 수정

모듈화를 배우는 도중에 export, import 구문을 헷갈리지않도록 간단하게 정리하려고 한다.

export?

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

내보낸 값은 import문으로 가져가 사용할 수 있다.

export 종류 

Named Exports 

Default Exports

---

예제를 살펴보기 앞서 예제의 폴더 구조는 이러하다.

 .

├── index.html 

├── kim.js             // import 함수

└── sayHello.js       // export 함수

 

Default Exports 

1개의 모듈 export만 가능

Default Exports 예제

 

index.html

<script type="module" src="./kim.js"></script>

type="module"로 js를 추가하기

 

sayHello.js

export default function sayHello(name){
    return `Hello ${name}`
}

export default라고 명시

 

kim.js

import sayHello from './sayHello.js'

const kim = sayHello('kim');
console.log(kim) // Hello kim

import 옆에 {} 작성하지말고 그대로 쓰기

 

---

Named Exports

0 또는 다수의 모듈 export 가능

Named Exports 예제

 

index.html

<script type="module" src="./kim.js"></script>

kim.js 추가

 

sayHello.js

export function hello(name){
    return `안녕하세요! ${name}!`;
}

export function login(name){
    return `${name} 님이 입장하셨습니다.`;
}

두개의 모듈 생성 

 

kim.js

import { hello, login } from './sayHello.js';

const kimHello = hello('kim');
const kimLogin = login('kim');

console.log(kimHello);
console.log(kimLogin);

import {}을 이용하여 모듈 import

---

이름 바꾸기

모듈 내보내기에서 이름 바꾸기

 

sayHello.js

export function fn1(name){
    return `안녕하세요! ${name}!`;
}

export function fn2(name){
    return `${name} 님이 입장하셨습니다.`;
}

export {
    fn1 as hello,
    fn2 as enter
}

fn1, fn2로 선언되어 있는 함수를 export 할때 hello, enter로 각각 변환

 

kim.js

import { hello, enter } from './sayHello.js';

const kimHello = hello('kim');
const kimEnter = enter('kim');

console.log(kimHello);
console.log(kimEnter);

변환된 이름인 hello, enter로 사용

 

모듈 가져오기에서 이름 바꾸기

sayHello.js

export function fn1(name){
    return `안녕하세요! ${name}!`;
}

export function fn2(name){
    return `${name} 님이 입장하셨습니다.`;
}

 

kim.js

import { fn1 as hello, fn2 as enter } from './sayHello.js';

const kimHello = hello('kim');
const kimEnter = enter('kim');

console.log(kimHello);
console.log(kimEnter);

첫쨰줄에서 이름을 변경하여 가져온다.

---

모듈은 항상 strict mode를 사용한다.

 

sayHello.js

export function fn1(name){
    a = `안녕하세요! ${name}!` // Uncaught ReferenceError: a is not defined
    return a;
}

에러가 발생한다. (strict mode가 아니면 발생하지 않음)

 

모듈 사용의 이점 

다른 기능을 가진 다른 코드가 다른 파일에 있기 때문에 코드 베이스는 유지 관리가 더 쉽다.

코드를 재사용 가능하게 만든다. 모듈을 정의하고 필요에 따라 여러번 사용할 수 있다.

 

---

Reference

https://www.programiz.com/javascript/modules