Imort & Export

리액트에 필수로 사용되는 문법중 하나인 export 와 import 이다.
Js 파일 하나하나가 모듈이라고 할 수 있다.
imort 와 export는 이 모듈을 내보내거나 불러와야 할 때 사용한다.

Export

export는 Js 모듈에서 함수, 객체 원시 값을 내보낼 때 사용한다.
내보낸 값은 다른 프로그램에서 import로 가져가 사용할 수 있다.
내보내기에는 두 종류 방법이 있다.

기본 내보내기

// 먼저 선언한 식별자 내보내기
export { myFunction as default };

// 각각의 식별자 내보내기
export default function () { ... };
export default class { ... }

유명 내보내기

// 먼저 선언한 식별자 내보내기
export { myFunction, myVariable };

// 각각의 식별자 내보내기
// (변수, 상수, 함수, 클래스)
export let myVariable = Math.sqrt(2);
export function myFunction() { ... };

기본 내보내기는 리액트에서 자주 나오는 방법이고, 유명내보내기는 여러 값을 내보낼 때 유용하다.

다시 내보내기 / 조합

부모 모듈이 자식 모들을 가져와 다시 내보낼 수도 있다.
즉, 여러 개의 모듈을 모아놓을 하나의 모듈을 만들 수 있다.

export foo from 'bar.js'

// 위 구문은 아래와 동일
import foo from 'bar.js';
export foo;

Import

import는 다른 모듈에서 내보낸 바인딩을 가져올 때 사용한다.
가져오는 방법은 아래와 같다.

모듈 전체를 가져오기

import * as myModule from "my-module.js";

모듈에서 하나의 멤버만 가져오기

import {myMember} from "my-module.js";

모듈에서 여러 멤버 가져오기

import {myMember} from "my-module.js";

가져올때 별명 지정하기

import {reallyReallyLongModuleMemberName as shortName} from "my-module.js";

// 여러 멤버도 가능
import {reallyReallyLongModuleMemberName as shortName, anotherLongModuleName as short} from "my-module.js";

어떠한 바인딩 없이 모듈 전체의 사이드 이펙트만 가져오기

import "my-module.js";

default export 값 가져오기

// default export 로 export 된 값만 가져온다.
import myModule from "my-module.js";

위와 함께 기본 구문 같이 실행하기
이때 기본값 가져오는 부분을 먼전 선언해야 한다.

import myDefault, * as myModule from "my-module.js";
// myModule used as a namespace

import myDefault, {foo, bar} from "my-module.js";
// specific, named imports