[7] React ES6 Modules

Modules

JavaScript 모듈을 사용하면 코드를 여러 개의 파일로 나눌 수 있다. 이렇게 하면 코드베이스를 유지관리하기 더 쉬워진다. import ES 모듈 및 export 명령문을 사용한다

 

export

어떤 파일에서나 함수나 변수를 내보낼 수 있다. person.js라는 이름의 파일을 만들고 내보내고 싶은 내용을 채워보며 예시를 작성하겠다.

export에는 Namde 내보내기와 Default 내보내기의 두 가지 유형이 있다.

 

Named Exports

In-line individually: preson.js

export const name = "Jesse"
export const age = 40

 

All at once at the bottom: preson.js

const name = "Jesse"
const age = 40

export { name, age }

 

Default Exports

이름이 message.js 인 다른 파일을 만들어서 Default Export 방법을 보여주는 데 사용해보겠다.

 

한 파일에는 Default Export 기능을 하나만 사용할 수 있다.

const message = () => {
  const name = "Jesse";
  const age = 40;
  return name + ' is ' + age + 'years old.';
};

export default message;

 

Import

모듈을 파일에 가져오는 방법은 두 가지가 있습니다. 하나는 Named Exports 다른 하나는  Default Export 방식인지에 따라 달라진다Named Exports 는 중괄호를 사용하여 구조화 해제해야 하지만 Default Export 는 그렇지 않다.

 

Named Exports

import { name, age } from "./person.js";

 

 Default Export 

import message from "./message.js";