모듈 export, import, module

모듈

코드를 모아둔 하나의 파일을 말합니다. 재사용성이나 유지보수성 등을 위해 사용되며, 궁극적으로 큰 목적을 달성을 하기 위해서 관련된 함수나 조각 코드를 모아서 만듭니다. 간단히 하나의 자바스크립트 파일이다라고 이해할 수 있습니다.

---

 

Export / Import

함수, 객체 값을 보낼 때(export), 보낸 값을 받을 때(import) 사용합니다.

export방식에는 기본 내보내기 방식과 이름이 정의된 내보내기 방식이 존재합니다.

기존 내보내기 방식은 모듈에서 하나의 함수나 객체를 기본으로 내보내고자 할 때사용하며

이를 Default Exports라고 합니다. 

그리고 선언 키워드 앞에다가 export를 붙여서 사용하는 방법을 Named Exports라고 합니다.

먼저 Named Exports 예시는 다음과 같습니다.

 

예시를 위해 new.js 파일을 추가하겠습니다.

 

 

간단한 function을 만들었습니다.

보내기 위해 export를 작성해 줍니다.

 

 

 

다음은 index.html에 script.js(기존 스크립트파일)을 연결하기 위해 작성한 문법에 type = "module"를 추가하여 작성해 줍니다.

 

 

 

 

그리고 기존에 존재하던 script.js파일에서 greeting fucntion을 import 합니다. from 뒤에 경로를 잘 작성해주어야 합니다.

 

 

 

 

index.html을 다시 켜보면 이렇게 콘솔에 결괏값이 나옵니다.

 

 

 

 

 

export 선언부를 분리해서 사용할 수도 있습니다.

 

 

 

 

 

다른 방식인 기본 내보내기 방식( Default )은 다음과 같이 사용할 수 있습니다.

 

먼저 이렇게 export 뒤에 default를 붙여줍니다.

 

 

 

그러면 이렇게 { }를 생략하고 사용할 수 있으며,

이름을 새로 지정할 수 있습니다.

 

 

 

이렇게 사용해도 똑같은 결괏값을 출력합니다.

 

 

 

 

default 방식도 이렇게 선언부를 분리해서 사용할 수 있습니다.

 

 

 

 

 

🤔 export와 export default의 차이?

모듈의 종류는 크게 두 가지로 나뉘게 됩니다.

1. 복수의 함수가 있는 라이브러리 형태의 모듈(named)

2. 개체 하나만 선언되어 있는 모듈 (default) 

 

보통은 일정한 코드를 위해 두 번째 방식을 선호한다고 합니다.

그리고 둘 다 혼용해서 쓰는 환경은 좋지 못하다고 합니다.

즉, 개발환경에 따라 이미 선언한 방식으로 따라가는 것이 좋을 것 같습니다.

 

결과적으론 값이 하나일 경우 export default를, 여러 값을 사용할 경우 export를 사용합니다.

 

 

 

이룸코딩 ErumCoding 

https://youtu.be/GFF3zgFS7Ug?si=Y6NoUja_CnfzQL7n