Export와 Import

JavaScript에서는 모듈 방식의 코드를 작성할 수 있는 기능이 있어서 여러 개의 파일로 코드를 분할하는 것이 가능합니다.

 

그래서 코드를 여러 파일로 나누고 Html 파일에 올바른 순서로 코드를 가져오기만 하면 됩니다.

 

문장을 내보내고 가져오는 모듈이라는 것은 JavaScript 파일 안에 있는 것으로 다른 파일에서 콘텐츠를 불러올 수 있고,

 

JavaScript 파일은 그 컨텐츠가 어디에서 온 것인지 알 수 있습니다.

 

 

예시 코드와 함께 살펴보겠습니다.

const person = {
  name: "LSH",
};

export default person;

person.js 라는 파일이 하나 있고, 상수 person에는 객체가 저장되어있습니다.

 

해당 상수를 default 키워드를 사용하여 내보낼 수 있고 이렇게 내보낸 상수는 다른 곳(다른 파일)에서 import 키워드를 사용하여 가져올 수 있습니다.

 

person.js 파일에서 사용하고 있는 default 키워드는 person.js 파일에서 export default가 내보낸 것,

 

즉 상수 person을 기본 값으로 가져오는 것을 의미합니다.

 

import person from "./person";
import p from "./person";

이렇게 내보낸것을 받아 올 파일에 import 해주게 되면 원하는 대로 객체의 이름을 정할 수 있습니다.

 

위의 예시 코드처럼 person이라고 해주어도 되고 p라고 해주어도 됩니다.