[JS] import 와 export 사용하는 방법

import/export 문법은 여러 파일에 코드를 분리해 관리하기 위함이다.

 

 

export / import  {...} from

utill.js

export let apiKey = "adfasdgkl";

• 작성된 변수나 함수를 다른 파일에서 사용하려면 export를 추가해 준다.

app.js

import { apiKey } from "./utill.js"

console.log(apiKey);

• 다른 파일의 변수나 함수를 사용하려면 import { 변수나 함수명 } from “파일 경로”를 작성한다.
  • 리액트는 파일명에 확장자(. js)를 쓰지 않아도 된다.
  • 빌드 프로세스가 알아서 확장자(.js)를 추가하기 때문이다.
  • 빌드 프로세스가 없는 자바스크립트는 확장자를 입력해야 한다.
• 변수나 함수명은 대소문자 구분해서 똑같이 입력한다.
• 파일 경로는 ‘’(작은따옴표), “”(큰 따옴표) 모두 사용할 수 있다.

index.html

<script scr="scripts/app.js" type="module"></script>

• html에 파일을 불러오려면 반드시 type=”module” 속성을 추가해야 한다
• 하지만 리액트는 type=”module” 속성이 없다.
• 이유는 빌드 프로세스가 import, export가 있는 개별 파일을 모두 합쳐 하나의 큰 파일을 만든 다음 기존 문법을 사용해 import 구문을 처리하기 때문이다.
• 이렇게 하면 import, export를 지원하지 않는 브라우저에서도 코드를 실행할 수 있고, 브라우저가 여러 개의 작은 자바스크립트 파일을 다운로드하는 대신 몇 개의 큰 파일을 다운로드하면 되므로 더 효율적이다.

 

 

export default / import ... from

utill.js

export default "adfasdgkl";

• default를 추가하면 이 파일에서 export 하는 기본값이다.
• 이때 변수(let apiKey)를 생성하지 않는다. 즉, 이름을 할당하지 않고 그냥 값을 export 한다.
• 파일별로 하나의 default export만 존재할 수 있다.

app.js

import apiKey from "./utill.js"

console.log(apiKey);

• default export를 가져올 때는 {} 중괄호가 없어도 된다.
• 이름이 할당되어 있지 않으므로 import 하는 파일에서 원하는 이름을 할당한다.

 

 

export default  + export / import * as ... from

utill.js

export default "adfasdgkl";
export let apiKey = "adfasdgkl";
export let asd = "asd";

• default와 이름 있는 export를 함께 사용해도 된다. defualt가 하나만 있다는 전제하에.

app.js

import { apiKey, asd } from "./utill.js"

console.log(apiKey);

• {} 중괄호로 여러 개의 export를 가져올 수 있다.

import * as util from "./utill.js"

console.log(util.asd);

• * 를 입력하고 as로 이름을 할당해 전체를 가져올 수 있다.
• 모든 대상이 util 이라는 객체로 결합되고 객체.대상(util.asd) 표기법을 사용하면 된다.
• default는 util.default로 사용할 수 있다.

import { apiKey, asd as content } from "./utill.js"

console.log(content);

• as를 사용해 새로 이름을 할당할 수도 있다.