Introduction

• Javascript에서 다른 페이지의 Function이나 Class 등을 불러오기 위해 Module System이 만들어 졌다. (Link : MDN Docs)

• 파일 밖으로 내보낼 때는 Export를 사용하고, 반대로 밖의 요소를 내부로 불러올 때는 Import를 사용한다.

  import React from "react"
  

• 이 중 Export의 경우 그냥 Export를 하거나, Export Default를 사용하는 경우가 있는데 이에 대해 정확하게 짚어보려고 한다.

Export

//TestComponent.js

function TestA() {
	return <div> Component Test A </div>
}
function TestB() {
	return <div> Component Test B </div>
}

export { TestA, TestB };

//App.js

import { TestA, TestB } from './TestComponent.js';

• 그냥 Export를 사용한 경우엔 중괄호를 사용해 내부에 Function 이름을 명시함으로써 import 할 수 있다.
• 이 방식의 경우 { } 내부에 다수의 Function을 표기해서 한번에 가져올 수 있다.

Export Default

//TestComponent2.js

function TestC() {
	return <div>Component Test C </div>
}

export default TestC;

//App.js

import TestC from './TestComponent2.js'

• Export Default의 경우 중괄호 사용 없이 사용하며 from 내부에서 가져올 요소가 하나만 있을 경우 사용한다.
• React의 경우 일반적으로 Component 단위로 js 파일을 관리하기 때문에 하나의 js에 하나의 Component만 들어 있으므로 export default를 사용한다.

이외에도

export { funcA as customA, funcB as customB };

...

import { customA, customB } from '...'

와 같이 export하면서 별칭을 지어주고 그 이름을 가지고 import를 하거나,

export { funcC, funcD };

...

import { funcC as customC, funcd as CustomD } from '...'

와 같이 반대로 import 해오면서 별칭을 지어주는 방법도 사용이 가능하다. 이처럼 Javascript의 Module 관리와 관련한 다른 기능은 상단 MDN 링크를 참조하면 된다.