[Javascript] 다른 자바스크립트 파일 불러오기 Export / Import

[자바스크립트] 다른 자바스크립트 파일 불러오기

Export / Import 

main.js에 play.js파일 불러오기

 

  기본 형태 : Export 

//Export (내보내기)
//상수, 변수, 클래스, 함수, 객체 가능
export (내보낼모듈명);

//Exports (내보내기)
//상수, 변수, 클래스, 함수, 객체 가능
exports (내보낼 모듈명1);
exports (내보낼 모듈명2);
exports (내보낼 모듈명2);

 

  기본 형태 : Import

//Import

//한개 모듈 내보내기 했을 경우
import 내보낸모듈명 from '모듈의 절대 or 상대 경로';

//두개 모듈 이상 내보내기 했을 경우
import {모듈1, 모듈2 ...} from '모듈의 절대 or 상대 경로';

//모듈을 다른 이름으로 불러오기
import {모듈1 as 다른이름1, 모듈2 as 다른이름2} from `모듈의 절대 or 상대 경로`;

 

  Export & Import 예제 [play.js] (단수)

//play.js파일
//내보내기 위해서 export 키워드 사용

export class Person {
	constructor(name,age){
    	this.name = name;
        this.age = age;
    }
    Print = ()=>{
    	console.log(`이름 : ${this.name} 나이 : ${this.age}세`);
    }
}

 

  Export & Import 예제 [main.js] (단수)

//main.js에서 play.js 불러오기
//현재 예제에서는 main.js와 play.js 파일은 
//같은 경로에 있다는 것을 가정

import Person from './play.js';

const Per1 = new Person('홍길동',15);
Per1.Print();

 

  출력 결과

이름 : 홍길동 나이 : 15세

 

  Export & Import 예제 [play.js] (복수)

//Studen1, Student2 두개 클래스 내보내기
//export 여러번 사용하면 된다.
//클래스가 아니어도 함수, 변수, 배열, 객체 등 
//다른 자료형 또한 export로 내보내기 가능하다

export class Student1 {
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    Print = ()=>{
        console.log(`이름 : ${this.name} 나이 : ${this.age}세`);
    }
}
export class Student2 {
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    Print = ()=>{
        console.log(`이름 : ${this.name} 나이 : ${this.age}세`);
    }
}

 

  Export & Import 예제 [main.js] (복수)

//main.js에서 play.js 파일 포함
//두개의 클래스를 내보냈기 때문에 두개의 변수로 전달 받는다.
//물론 두개 이상 전달 가능하고,
//내보내기 했던 변수 이름과 같아야 한다.
//내보내기 했던 변수 이름과 다른 이름으로 전달받으려면
//as 키워드를 사용하면 되는데
//Student1을 Student로 받으려면
//import {Student1 as Student, Student2} from './play.js'
//와 같이 전달 받을수 있다.
import {Student1,Student2} from './play.js';

const Stu1 = new Student1('홍길동',15);
const Stu2 = new Student2('이순신',16);

Stu1.Print();
Stu2.Print();

 

  출력 결과

 

이름 : 홍길동 나이 : 15세

이름 : 이순신 나이 : 16세