230113 JS ES6 module import export

주영재 2023. 1. 13. 18:27

module import export

모듈 임포트

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

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

직접 앞에 export를 걸어도 되고, export{}로 선언해놓은 변수를 내보내기도 되고.

module을 사용하려면script태그에 type="module"문을 반드시 작성해야 함.

import 방법 1 (Destructing방식)
import {export 한 것 중 가지고 올 것들} from './script01.js';
./ =>현재 위치 의미.

import 방법 2 (Alias 방식)
import * as 이름 from './script01.js';
이름으로 사용하겠다는 뜻
이름.변수 등으로 사용

import 방법 3 (이름 바꿔 가져오기)
import {name as n, age as a, getInfo as get} from './script01.js';
잘 사용하진 않음.

**뒤에가면 html파일을 잘 안쓰기 때문에 module을 몰라도 됨.
default export방식은 하나만 받기 때문에 destructuring방식이 아니라 이름으로 바로 받음.

모듈 export import

/*
 모듈 익스포트, 임포트
 -모듈은 JS ES6의 미리 작성해 놓은 스크립트 파일입니다.
 -변수, 함수, 클래스 등이 정의되어 있습니다.
 
 -모듈을 내보내는 방식
 -여러값을 내보낼 때 named export
 -단일값을 내보낼 때 default export


*/


export const name = "이순신";
export const age = 20;

export const info = () =>{console.log(`이름:${name}, 나이:${age} `)}


let addr="서울시";
let myInfo=()=>{console.log(addr)}
export{addr, myInfo};

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="module">
        //예제에서 module을 사용하려면 반드시 type을 적어야 합니다.
        import {name, age, info, addr, myInfo} from './index01.js';

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

        console.log("---------------------------------------");
        //import2 - 엘리어스 방식
        import * as test from './index01.js';
        console.log(test.name);
        console.log(test.age);
        test.info();
        console.log(test.addr);
        test.myInfo();
        
        console.log("---------------------------------------");
        //import 이름붙여 가져오기
        import {name as n, age as a} from './index01.js';
        console.log(n);
        console.log(a);
    </script>
</body>
</html>

default export 방식

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

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

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

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script type="module">
        import Person from './index02.js';

        const p = new Person('hong',20);
        console.log(p.getInfo());
    </script>
</body>
</html>