[js] ES6 모듈화 다루기 (export, import)

🗣️ ES6에서 새롭게 지원하는 모듈 형태를 사용하기 위해 export, import를 사용해보는 법을 알아봅시다!

📌 모듈

모듈이란 재사용할 수 있는 단위로 나눈 코드들의 묶음이라고 할 수 있습니다. 이렇게 나누는 것을 모듈화라고 합니다.

💡 제일 먼저 모듈을 사용하기 위해서는 script 태그에 type="module" 속성을 추가해야 사용가능하다.

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

📌 javascript에서 모듈화 하기

export

• 다른 곳에서 이 모듈을 사용하기 위해 내보낼때 씁니다

// 선언부 앞에 export, 아래는 보이는 함수를 모듈로 쓴다
export const makeCar = () => { 
  console.log(a)
}
// 상수 내보내기
export const MAX_NUMBER = 10


// 다른 떨어진 곳에서 export
const const makeCar = (a, b) => { 
  console.log(a)
}

export { makeCar }

import

• 다른 곳에서 모듈화 된 것을 사용하려고 가져올때 씁니다

보통 모듈화 된 것을 코드에 작성하면 import문이 자동으로 생성되기도 하지만, 안 될 수도 있으니 꼭 확인해줘야 합니다.

// 사용할 모듈만 가져오기
import { makeCar }from "app.js"
import { makeCar, makeHome }from "app.js"

// export 대상 전부 가져오기
import * as app from "app.js"

export default

• 단일 값을 내보낼 때나 모듈의 폴백 값이 필요할 땐 기본 내보내기를 사용할 수 있습니다

// 기본 내보내기
export default function makeCar(a, b) {
  return a*b
}

// export default로 내보내지면 중괄호 없이 import 가능
import makeCar from "app.js"

export default를 사용할 때 var, let, const는 사용할 수 없습니다

✅ 이러한 모듈화를 통해 프로그램을 짤 때, 손 쉽게 이해할 수 있도록 구상해야 하고 모듈화를 해야 유지보수도 뛰어날 것입니다. 또한 똑같은 코드를 중복적으로 사용하지 않을 수 있기 때문에 적극적으로 활용하는 습관을 길들이는 게 중요하다고 생각합니다.

참고 사이트
⛓️ mdn