모듈 export import

모듈 : 분리된 각 파일을 의미

모듈이라는 것은 대개 클래스 하나, 또는 특정 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성됨.

--> 오래된 스트립트에서 발견되고있고, 관련문법이 진화과정을 거쳐 이제는 주요 브라우저와 node.js 가 모듈 시스템을 지원하고있다.

--->

모듈은 단지 하나의 파일에 불과 --> 스크립트 하나가 모듈하나.

• export: 얘를 변수나 함수앞에 붙이면 외부모듈(파일)에서 해당 변수나 함수에 접근가능함.(변수나 함수, 클래스를 선언할 때 맨 앞에 export를 붙이면 내보내기가 가능)
• import: export로 내보낸 외부모듈의 것을 가져올 수 있다.

사용방법:

내보낼 함수나, 변수 앞에 export를 붙인다. --> import 가져오는것 from '파일경로' 이런식으로 가져온다.

export 붙여 내보내기.

// 배열 내보내기
export let months = ["Jan","Feb","Mar",...];

// 상수 내보내기
export const YEAR = 2023;

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

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

function Hello(user){
	alert(`Hello, ${user}!`);
   }

 
   export {Hello};

export 를 함수 선언부 위에 적어주어도 동일하게 작동한다.

무언가를 가져오고 싶을때는 import {...} 여기 중괄호안에 적어주면된다.

import ‘as’

as를 사용하면 이름을 바꿔서 가져올 수 있다.

// 📁 say.js
function sayHi(user) {
alert(Hello, ${user}!);
}

function sayBye(user) {
alert(Bye, ${user}!);
}

export {sayHi, sayBye};

// 📁 main.js
import {sayHi as hi, sayBye as bye} from './say.js';

hi('John'); // Hello, John!
bye('John'); // Bye, John!

export as

export 에도 as를 사용할 수 있다.

// 📁 say.js
...
export {sayHi as hi, sayBye as bye};

이제 다른 모듈에서 해당 함수들을 가져올때는 hi 와 bye를 가져오게된다.

export default !!

export default 를 사용하면 해당 모듈엔 개체가 하나만 있다 라는 것이라고 되어있다.

수업에서는 export default를 사용하면 우리눈에 보이게 내보내줘 라는 뜻이라고 이해했다.

파일엔 export default가 하나만 존재한다.

default가 붙은 경우 import 시에는 중괄호 없이 가져올 수 있다.

import User from './user.js';

default export한 모듈을 가져올 시 중괄호 필요 없음!!

named export 와 default export를 같은 모듈에서 동시에 사용해도 상관은 없으나 실무에서는 거의 사용하지 않는 방식이기에 한 파일에는 둘 중 하나만 사용한다.

파일당 최대 하나의 default export가 있을 수 있으므로 내보낼 개체엔 이름이 없어도된다.

export default function(user) { // 함수 이름이 없음
  alert(`Hello, ${user}!`);
}

// 이름 없이 배열 형태의 값을 내보냄
export default ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

이것이 가능한 이유?

export default는 파일당 하나만있다. 따라서 이 개체를 가져오기 하려는 모듈에서는 중괄호 없이도 어떤 개체를 가져올지 정확히 알 수 있기에 이름이 없어도 되는것이다.

만약 여기서 default 를 붙이지 않은 상태에서는 이름이 없으면 에러가 발생한다. 즉,
export default 가 아닌 경우에는 이름이 꼭 필요하다

default export 가져오기:

• import x from "mod"
• import {default as x} from "mod"

한 번에 가져오기:

• import * as obj from "mod"

모듈을 가져오긴 하지만(코드는 실행됨), 변수에 할당하지 않기:

• import "mod"

== import/export 문은 스크립트의 맨 위나 맨 아래에 올 수 있는데 이 둘엔 차이가 없다.

주로 편의를 위해 최상단에 위치시킨다.
단, 주의 해야할것은 블록 {...} 안에서는 동작하지 않는다.
조건을 충족하면 모듈을 가져오려는 의도의 코드를 작성시 확실히 알 수 있다.

if (something) {
  import {sayHi} from "./say.js"; // 에러: import 문은 최상위 레벨에 위치해야 합니다.
}

출처- 모던 자바스크립트