[React] export, export default

리액트(자바스크립트)에서 export와 export default는 모듈에서 객체, 함수, 변수 등을 다른 모듈로 내보낼 때 사용함.

export

// Test.js
export const Test1 = () => {};
export const Test2 = () => {};

// App.js
import { Test1, Test2 } from './Test';

• 여러 개의 export 사용 가능함.
• import 시 이름 변경 불가능, 정확한 이름을 사용해야 함.
• import 시 중괄호 {} 안에 가져와야 함. named export된 값들을 구조 분해하여 사용할 수 있음.

export default

// Test.js
const Test = () => {};
export default Test;

// or
export default function Test() {};

// App.js
import Test from './Test'

//or
import CustomName from './Test' // 이름 변경 가능

• 모듈 당 오직 하나의 export default 사용 가능함.
• import 시 원하는 이름 사용 가능함.