Web Dev/JavaScript :: 자바스크립트

[JavaScript] ES6 모듈 - 단 두 가지 요소 import, export

HJPlumtree 2021. 4. 9. 19:22

웹팩이 (조금이라도) 이해됬다면

이제는 모듈 문법(syntax)를 알아볼 차례

 

단 두 가지 구성요소가 있다.

  • import
  • export

 

쉽게 사용할 수 있다.

export

// functionOne.js 파일
const functionOne = () => console.log('FUNCTION ONE!')

export { functionOne }

 

import

import { functionOne } from './functionOne'

functionOne() //this should work as expected!

 

모듈로 코드를 작성하는 많은 장점이 있는데,

그 중 가장 좋은것은 '코드 재사용'

 

다른 이점은 factory function 또는 module pattern으로 코드를 감쌀 수 있다는 것

참고: 모듈 패턴(module pattern)과 ES6 모듈은 다른거다.

 

ES6 모듈을 이용하면,

  • 코드를 깨끗이 분리할 수 있다.
  • 코드 관리가 쉽고, 에러를 덜 낼 가능성이 높다.
  • 필요한 함수만 가져오면(import) 된다.

 

원문: ES6 Modules | The Odin Project