[React]파일 구조 파악하기(export & import) #1

export 문은 JavaScript 모듈에서 함수, 객체, 원시 값을 내보낼 때 사용합니다.
그리고 여기서 내보내진 값은 다른 곳에서 import 문을 통해 받아와서 사용할 수 있습니다.

우선, export에는 두 가지의 방식이 있습니다.
1. 유명 (named)

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

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

2. 무명 (default)

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

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

그렇다면, export와 default export의 차이점에는 어떤 것들이 있을까요?

export는 하나의 파일에서 여러 개의 변수를 내보내고 싶을 때 사용합니다. 이때에는 반드시 서로의 충돌을 방지하기 위해 export된 값의 변수명을 그대로 import 해와야 합니다.

하지만, default export의 경우는 조금 다른데요. default export는 기본적으로 하나의 값밖에 내보내지 못합니다. 하지만 default export의 편리한 점은 다른 export된 값이 없기에 충돌에 대한 방지를 하지 않아도 되어 다른 위치에서 import 해올 때 export한 변수명이 아닌 다른 이름으로도 import할 수 있다는 점입니다. 다음 예시를 보며 살펴보도록 하겠습니다.

// test.js
let k; export default k = 12;

위 처럼 test.js 파일에서 k를 export default k를 통해 내보낸 다음, 다른 위치에서 받아오도록 하겠습니다.

// 임의의 다른 파일
import m from './test';
console.log(m);   // 12

이때 import m 을 통해 k의 값을 불러오신 것을 확인할 수 있습니다.

부모 요소는 자식 모듈을 export할 수 있다.

이 부모 요소가 자식 모듈을 export할 수 있다는 얘기는 얼핏 보면 당연해보이고 별로 쓸모 없어 보일 수도 있겠지만 사실 파일 구조를 관리하는 데에 있어서 별도의 부모 요소에 자식 모듈들을 한 번에 모아 관리하기 편하게 해준다는 장점이 있습니다.