export/import

export

 

• export란?

export 는 내보낸다. 즉 export문은 JS모듈에서 함수,객체,원신 값을 내보낼 때 사용한다.
ES6 부터 도입된  이 기능은 코드의 재사용성과 가독성을 높이는데 도움을 준다.

내보낸 값은 다른 프로그램에서 import문으로 가져가 사용할 수 있다.
내보내는 모듈은 "use strict"의 존재 유무와 상관없이 무조건 엄격 모드 이다.
그리고 export 문은 HTML 안에 작성한 스크립트 안에서는 사용할 수 없다.

 

• 사용법

◆ Named Exports 
여러 개의 항목을 내보낼 수 있다.

export const age = 30

export function myFunc(){
console.log("어쩌구")
}​

◇ Default Export
하나의 기본 항목을 내보낼 수 있다.

const myFunc2 = ()=>{
console.log("default임")
}

export default myFunc2

import

 

• import란?

정적 import 문은 다른 모듈에서 내보낸 바인딩을 가져올 때 사용한다.

export와 마찬가지로 가져오는 모듈은 "use strict"의 존재 유무와 상관없이 무조건 엄격 모드이며
HTML 안에 작성한 스크립트에서는 import를 사용할 수 없다.

함수형 구문을 가진 동적 import도 있으며 이는 "type=module" 을 필요로 하지 않는다.

동적 가져오기는 모듈을 조건적으로 가져오고 싶거나, 필요할 때에만 가져올때 유용하다.
반면 초기 의존성을 불러올 때엔 정적 가져오기가 더 좋고, 정적 코드 분석 도구와 트리 셰이킹을 적용하기 쉽다.

▲ 트리 셰이킹
트리 셰이킹은 JS 맥락에서 죽은 코드 제거를 설명하기 위해 일반적으로 사용되는 용어다.
import 및 export 문을 사용하여 JS 파일에서 사용하기 위한 코드 모듈을 내보내고 가져오는 것을 감지한다.
최신 JS 애플리케이션 에서는 모듈 번들러(webpack,Rollup등)를 사용하여 여러 JS 파일을 단일 파일로 번들링할 때 죽은 코드를 자동적으로 제거한다. 

 

• 사용법

○ 기본 내보내기로 내보낸값 받아오기

import 가져올이름(default로 내보낸값) from "./경로"​

 

• import 상대경로

import {add} from "./main.js"

위 코드에서 "./main.js"는 파일의 경로를 나타낸다.
"./"으로 시작되는 경로는 '상대경로' 라는 것을 나타내게 되는데 여기서 '상대경로' 란 현재 파일의 위치에따라
다르게 해석되는 파일 또는 디렉토리의 위치를 나타내는 방식이다.
즉 "./main.js" 는 현재 파일이 위치한 디렉토리에서 "main.js"라는 이름의 파일을 찾는것을 의미한다.

이와 달리 "../"는 상위 디렉토리를 나타내는데 "../main.js"의 경우 현재파일이 위치한 디렉토리의 상위 디렉토리에서 "main.js"를 찾는것을 의미한다.

파일3의 상위폴더인 통합폴더에서 폴더3을 찾아 폴더3안에 파일4를 찾음