[JS] Import 그리고 export

javascript에서는

import를 통해 내보내진 데이터(함수, 클래스, 변수 ...등)를 사용할 수 있고  

export를 통해 간단하게 데이터(함수, 클래스, 변수 ...등)를 내보낼 수 있다.

 

중요한 내용은 import와 export를 사용하는 ES 모듈(ECMAScript Module)은

자동으로 엄격모드에서 실행된다

 

React에서도 Node.js기반이기 때문에 import와 export를 사용하여 불러올 수 있는데

불러오는 이유는 하나의 소스코드에 모든 데이터를 코드로 작성을 하면 너무 복잡해진다.

따로 관리하기 위해서 그리고 코드를 깔끔하게 작성하기 위해서 주로 사용한다.

 

마지막 디테일하게 설명하고자 한다.

Export란?
JavaScript 모듈에서 데이터를 내보낼 때 사용한다.
사용하는 방법은  함수, 클래스,  변수를 선언할 때 앞에 export를 붙이면 내보낼 수 있다.

 

Import란?
export를 한 것들을 import로 가져와서 사용한다.
import ~ from ~ 의 형태로 사용한다.

 

사용 예시 

// export1.js
export const name = "dohi";
export const age = 99;

// export2.js
const name = "goddohi";
const age = 999;

export default  { name, age }

// import.js
import name from "./export1.js";
import age from "./export1.js";
import * as dohi from "./export1.js";  //모든 값을 dohi라는 객체로 불러옴

import person from "./export2.js";

console.log(name);
console.log(age);
console.log(dohi.name, dohi.age);
console.log(person.name, person.age);

 

export default :  해당 파일의 기본 모듈로 각 스크립트 별 한개만 가능