import / export (ES6)

모듈 내보내고 가져오기

JavaScript(ES6)에서는 파일을 모듈로 취급하고 모듈을 내보내고 사용하기 위해서 import, export를 사용합니다.

모듈은 비슷한 기능을 묶어 관리하는 것을 말합니다.

---

export

export 문은 JavaScript 모듈에서 함수, 객체, 원시 값을 내보낼 때 사용합니다.

• export 종류

  • named export

    • named export 방식으로 내보내기를 하면, 해당 모듈을 불러오고자 하는 파일에서는 중괄호로 감싸서 불러와야 합니다.

    • 한 파일 내에서 여러 변수/클래스 등을 export 할 수 있습니다.

      // export from ./MyComponent.js
      export const MyComponent = () => {};
      export const MyComponent2 = () => {};
      
      // import.js
      import { MyComponent, MyComponent2 } from "./MyComponent";
      

    • import할 때 as 키워드를 사용해서 다른 이름을 지정할 수 있습니다.

      import { MyComponent as ReName } from "./MyComponent";
      

  • default export

    1. default로 선언된 모듈은 하나의 파일에서 단 하나만 export 할 수 있습니다.

       // import
       import MyComponent from "./MyDefaultExport";
       
       // export
       const MyComponent = () => {};
       export default MyComponent;
       

    2. 모듈의 이름이 무엇이든 간에 default로 내보낸 모듈은 어떤 이름으로든지 import할 수 있습니다.

       // import
       import MyDefaultComponent from "./MyDefaultExport";
       
       // import
       import NewComponent from "./MyDefaultExport";
       
       // export
       const MyComponent = () => {};
       export default MyComponent;
       

• export 방삭

  • 선언부 앞에 export

    선언할 때 맨 앞에 export를 붙이면 내보내기가 가능합니다.

    // 변수 내보내기
    export const MODULES_BECAME_STANDARD_YEAR = 2015;
    
    // 클래스 내보내기
    export class User {
      constructor(name) {
        this.name = name;
      }
    }
    

  • 선언부와 떨어진 곳에 export

    선언부와 export가 떨어져 있어도 내보내기가 가능합니다.

    즉, 함수를 먼저 선언한 후, 마지막 줄에서 내보내기가 가능합니다.

    // 📁 say.js
    function sayHi(user) {
      alert(`Hello, ${user}!`);
    }
    
    function sayBye(user) {
      alert(`Bye, ${user}!`);
    }
    
    export { sayHi, sayBye }; // 두 함수를 내보냄
    

---

import

정적 import 문은 다른 모듈에서 내보낸 바인딩을 가져올 때 사용합니다.

• import 방식

  • export named를 import 할 때

    named default는 여러 번 내보낼 수 있으므로 가져올 리소스를 {}안에 적어줍니다.

    \*를 통해 전부 가져올 수 있으며 as를 이용해 객체 형태로 가져와 사용할 수도 있습니다.

    import * as math from "./export_calc.js";
    
    console.log(math.plus(1, 2));
    console.log(math.minus(1, 2));
    

  • export default를 import 할 때

    export default를 사용하면 ‘해당 모듈엔 개체가 하나만 있다’는 사실을 명확히 나타냅니다.

    따라서, {} 없이 모듈을 가져올 수 있습니다.

    import 시 변수 이름은 마음대로 설정할 수 있으며, 해당 변수를 사용해 리소스에 접근할 수 있습니다.

    import math from "./exportdefault_calc.js";
    
    console.log(math.plus(1, 2));
    console.log(math.minus(1, 2));