[JavaScript] ES6 문법 - 모듈 임포트/ 엑스포트

 

 

 

---

 

⭐ 모듈 임포트

모듈은 JS ES6문법에서 미리 작성해 놓은 스크립트 파일이며, 모듈 안에는 변수, 함수, 클래스 등이 정의되어 있다.
ES6부터는 주요기능들을 모듈로 구성하여 사용이 가능하다!

모듈을 내보내는 방법은 named export방식과 default export방식 2개가 있다.
여러 값을 내보낼 때 named export방식
단일 값을 내보낼 때 default export방식

 

 

 

여러 값 내보내기 👉 named export

모듈 Export하기

   //1번 방법
   export const name = "이순신";
   export const age = 20;

   export const info = () => {
      console.log("이름:" +  name + ", 나이:" + age);
   }

 

export를 하기 위해서는 export할 모든 변수와 함수에 "export"라는 키워드를 작성해줘야 한다

위의 경우는 각각 모든 데이터에 키워드를 작성해서 export를 한 경우이다

 

 

   //2번 방법
   let addr = "서울시";
   let myInfo = () => {
      console.log(addr);
   }

   export {addr, myInfo};

 

위의 코드를 보면 export를 다 작성하는 대신에 객체로 묶어서 export를 하고 있다 (이게 더 효율적인 것 같음!)

 

---

< HTML 파일 >

모듈 임포트 하는 방법 [1]

   ⭐ <script type="module"> ⭐
        
    //예제에서 module을 사용하려면 type을 반드시 적어야 한다

    //import1
    import {name, age, info, addr, myInfo} from './index01.js';
        
    console.log(name);
    console.log(age);
    info();
    console.log(addr);
    myInfo();
    
   </script>

 

< js 파일 >

   //1번 방법
   export const name = "이순신";
   export const age = 20;

   export const info = () => {
      console.log("이름:" +  name + ", 나이:" + age);
   }

   //2번 방법
   let addr = "서울시";
   let myInfo = () => {
      console.log(addr);
   }

   export {addr, myInfo};

 

 

먼저 js 파일로부터 정보들을 불러와야 한다

   import {name, age, info, addr, myInfo} from './index01.js';

 

js파일의 경로를 작성할 때는 현재 위치를 기준으로 상대경로를 작성해야 한다

그리고 { } 중괄호 안에 불러올 정보들을 작성하면 되는데 이를 destructuring이라고 한다👉 { 불러올 정보 }

 

   console.log(name);
   console.log(age);
   info();
   console.log(addr);
   myInfo();

 

임포트를 온전하게 마친다면 JS파일에서 export한 정보들에 접근이 가능하다

 

 

모듈 임포트 하는 방법 [2]

    //import2 - 엘리어스 방식
    import * as test from './index01.js';
    console.log(test.name);
    console.log(test.age);
    test.info();
    console.log(test.addr);
    test.myInfo();

 

임포트할 때 엘리어스로 이름을 붙여 정보를 가져올 수 있다

 

 

   import * as test from './index01.js';

 

위의 코드처럼 모든 정보를 가져오는 대신  test라는 이름을 붙이면 해당 정보에 접근할 때 test로 접근이 가능하다

 

    console.log(test.name);
    console.log(test.age);
    test.info();
    console.log(test.addr);
    test.myInfo();

 

 

모듈 임포트 하는 방법 [3]

    //import3 - 이름 붙여 가져오기
    import {name as n, age as a} from './index01.js';

    console.log(n);  //이순신
    console.log(a);  //20

 

위의 경우는 정보를 가져올 때 해당 데이터에 각각 이름을 붙여서 가져오는 방법이다

 

 

단일 값 내보내기 👉 default export

모듈 export하기

  class Person {
    constructor(name, age) {
        this.name = name; //멤버변수
        this.age = age;
    }

    getInfo = () => {
        return `이름 ${this.name}, 나이${this.age}`;
    }
  }

  //default구문은 반드시 1개여야 한다
  export default Person;

 

하나의 모듈에서 하나의 객체를 이름으로 내보낼 때 단일 객체 내보내기 export default문을 사용한다

⚠️ default구문은 반드시 1개여야 한다
⚠️ Class나 함수를 내보낼떄는 세미콜론을 붙이지 않도록 권유된다

 

 

 

  <script type = "module">

    import Person from './index02.js';

    const p = new Person('hong', 20);
    console.log(p.getInfo());

  </script>

 

객체를 export을 하면 객체의 정보에 접근하려면 객체 생성을 하고 사용해야 한다

  const p = new Person('hong', 20);

객체를 생성하여 p라는 변수에 저장하면 객체 내부에 접근이 가능하다