- 모듈이란 특정 데이터들의 집합(파일)을 의미한다.
- 모듈의 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()에 동일한 결과값을 얻을 수 있다.
