Module(모듈)

• 모듈이란 특정 데이터들의 집합(파일)을 의미한다.
• 모듈의 import(가져오기) 문법과 export(내보내기) 문법을 사용할 때, 모듈이라고 부를 수 있다.

module.js

export const hello = 'Hello World!'

• module.js에서 다음과 같이 코드를 입력하고, export를 통해서, 내보내기를 한다.

main.js

import { hello } from './module.js'

console.log(hello) // 'Hello World!'

• module.js를 받아오기 위해서는 import를 통해서 받아오기를 진행한다.
• 변수로 선언했던 hello는 {} 사이에 넣어주고, 콘솔을 찍으면, module.js에서와 동일하게 Hello World!가 출력된다.

기본(default) 내보내기

• 모듈에서는 값들을 내보낼 때, default(기본값), 객체, 함수 등을 export(내보내기) 할 수 있다.

module.js

export default defaultValue

• export시에, default를 사용해서, 기본으로 보내는 값을 지정가능하다.

main.js

import value from './moudle.js'

console.log(value); // defaultValue

• import시에, import와 from 사이에, 원하는 변수명을 입력한다.
• 변수로 선언한 값을 conosle에 출력해보면, moudule.js에서 default값으로 선언한 defaultValue라고 나오는 걸 확인할 수 있다.

유명(named) 내보내기

module.js

export const str = "ABC"
const const arr = []
export function hello() {}

• export시에, 함수, 배열, 객체, 변수등을 보내기가 가능하다.

main.js

import { str, arr, hello } from './module.js'

console.log(str); // 'ABC'
console.log(arr); // []
console.log(hello) // function hello()

• import시에, {} 사이에, 변수명을 넣으면, 출력이 가능하다.

main.js

`import { str as alphabet } from './module.js'`

console.log(alphabet); // 'ABC'

• 또한, as를 통해서 변수명을 다르게 변경할 수도 있다.

여러모듈 한번에 내보내기

moduleA.js

export const a = () => abc

moduleB.js

export const b = () => def

main.js

import { a } from './moduleA.js'
import { b } from './moduleB.js'

console.log(a()) //abc
console.log(b()) //def

• 모듈을 합치지 않으면, 다음과 같이 작동하게 된다.
• 하지만 모듈을 합치게 되면 다음과 같은 작용을 하게 된다.

moduleA.js

export const a = () => abc

moduleB.js

export const b = () => def

utils.js

export {a} from './moduleA.js'
export {b} from './moduleB.js'

• moduleA와 moduleB를 바로 export(내보내기)한다.

main.js

import { a, b } from './utils.js'

console.log(a()) // abc
console.log(b()) // def

• 그렇게 되면, 다음과 같이, console.log()에 동일한 결과값을 얻을 수 있다.