React - ES6 - 모듈

React ES6

자바스크립트 모듈을 사용하면 코드를 별도의 파일로 분해할 수 있다.

이를 통해 코드 기반을 더 쉽게 유지할 수 있다.

ES 모듈은 가져오기 및 내보내기 문에 의존한다.

모든 파일에서 함수나 변수를 내보낼 수 있다.

person.js라는 이름의 파일을 만들고 내보내고 싶은 것들로 채워보자.

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

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

const name = "Jesse"
const age = 40

export { name, age }

message.js라는 이름의 다른 파일을 생성하여 기본 내보내기 시연에 사용한다.

파일에는 기본 내보내기가 하나만 있을 수 있다.

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

export default message;

모듈의 이름이 내보내기인지 기본 내보내기인지에 따라 두 가지 방법으로 모듈을 파일로 가져올 수 있다.

이름 있는 내보내기는 곱슬곱슬한 괄호를 사용하여 구조를 해제해야 한다.
기본 내보내기는 그렇지 않다.

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

기본 예시

import message from "./message.js";

기본 예시

W3C School - React – React ES6 Modules

Mingg`s Diary

밍구

공부 목적 블로그