[React] import & export

export와 import 지시자는 다양한 방식으로 활용된다.

✅ export

---

📝 선언부 앞에 export 붙이기

변수나 함수, 클래스를 선언할 때 맨 앞에 export를 붙이면 내보내기가 가능하다.

// 배열 내보내기
export let months = ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

// 상수 내보내기
export const MODULES_BECAME_STANDARD_YEAR = 2015;

// 클래스 내보내기
export class User {
  constructor(name) {
    this.name = name;
  }
}

💡 클래스나 함수를 내보낼 땐 세미콜론을 붙이지 않는다.

export function sayHi(user) {
  alert(`Hello, ${user}!`);
}  
// 끝에 ;(세미콜론)을 붙이지 않는다.

📝 선언부와 떨어진 곳에 export 붙이기

선언부와 export가 떨어져 있어도 내보내기가 가능하다.
아래 예시에선 함수를 먼저 선언한 후, 마지막 줄에서 내보낸다.

function sayHi(user) {
  alert(`Hello, ${user}!`);
}

function sayBye(user) {
  alert(`Bye, ${user}!`);
}

export {sayHi, sayBye}; 
// 두 함수를 내보냄

💡 export문을 함수 선언부 위에 적어주는 것도 동일하게 동작한다.

📝 클래스, 함수 등의 선언부 앞에 export 붙여서 내보내기

export [default] class/function/variable ...

📝 이름 없는 개체 내보내기

export {x [as y], ...}

📝 다시 내보내기

export {x [as y], ...} from "module"

export * from "module" (default export는 다시 내보내 지지 않음)

export {default [as y]} from "module" (default export를 다시 내보냄)

✅ import

---

가져오고 싶다면 아래와 같이 이에 대한 목록을 만들어 import {...}안에 적어주면 된다.

import {sayHi, sayBye} from './say.js';

sayHi('John'); // Hello, John!
sayBye('John'); // Bye, John!

📝 import ‘as’
as를 사용하면 이름을 바꿔서 모듈을 가져올 수 있다.

import {sayHi as hi, sayBye as bye} from './say.js';

hi('John'); // Hello, John!
bye('John'); // Bye, John!

📝 Export ‘as’
export에도 as를 사용할 수 있다.

...
export {sayHi as hi, sayBye as bye};

📝 named export 가져오기

import {x [as y], ...} from "mod"

📝 default export 가져오기

import x from "mod"
import {default as x} from "mod"

📝 한 번에 가져오기

import * as obj from "mod"