모듈이란?

• 프로젝트는 하나의 파일로는 이루어져 있지 않고 여러 파일로 나누어 작업이 진행되며 파일 사이에 코드를 주고 받을 수 있는 체계가 있기 때문에 파일이 나눠서 코드가 작성된다. 파일 간 주고 받을 수 있는 코드 조각 코드 단위를 모듈이라고 한다.
• 재사용 가능한 코드 단위이자 파일 간에 주고받을 수 있는 코드 단위

다른 파일로 나누어 작업할 수 있는 원리

1. 내보낸 녀석은 모듈이다.
2. 내보낸 녀석은 다른 파일에서 갖다 쓸 수 있다.

→ 역으로 내보내지 않은 코드는 갖다 쓸 수 없다.

export : 내보내기

import : 갖고오기

export

• export를 이용해 하나 이상의 모듈(여러 개의 모듈도 가능)을 내보낼 수 있다.

export 내보낼 것;

// 상수 내보내기
export const 변수명 = `value`;

// 배열 내보내기
export let 배열이름 = [1, 3, 5, 7, 9];

// 클래스 내보내기
export class 클래스이름 {
  //생성자
	constructor(매개변수) {
    this.매개변수 = 매개변수;
  }
}

//함수 내보내기
export 함수이름 = (매개변수) => 함수동작

• export default

  • “이 파일에서 이 모듈 딱 하나만 내보낼 것이다.”라는 의미
  • 만일 파일 전체에서 내보낼 모듈이 하나 뿐이라면 export default로 내보내길 권장합니다.

• export as

  • 내보낼 모듈의 이름을 내가 지정한 이름으로 내보내고 싶을 경우 사용합니다.

    //한 개만 지정
    export 모듈 as 내가정한모듈이름
    
    //여러 개 지정
    export {모듈1 as 내가정한모듈1이름 , 모듈2 as 내가정한모듈2이름};
    

import

• export를 이용해 내보내준 모듈을 다른 파일에서 가지고 올 경우 import를 사용한다.

  import { 모듈(들) } from '모듈을_내보낸_파일'
  
  //여러 모듈을 가져올 경우
  import {모듈1,모듈2} from '모듈을 내보낸 파일';
  
  //다른 모듈을 다른 이름으로 이용할 경우
  import {모듈1 as 내가정한모듈1이름,모듈2 as 내가정한모듈2이름};