import, export

export

expoet는 단어의 뜻 그대로 내보는 것이다.
우리가 자바스크립트에서 만든 변수, 상수, 함수등을 다른 파일에서 쓸 수 있게 현재의 파일에서 내보는 것이다.

export function sum(a,b) {
	return a+b
}

위 예시처럼 export를 통하여 sum이라는 함수를 내보내고 있다.

이런 export가 변수, 상수, 함수등을 내보는 방법은 2가지가 있다.

1.export
위에 예시처럼 단순히 export만을 사용허여 내보낸다.

export function sum(a,b) {
	return a+b
}

export function hi() {
	console.log('hi')
}

이 방법은 한 파일에서 여러개를 내볼 수 있다.

2.export default
이 방법은 export 뒤에 default를 붙히는 것이다.

//index.js

export default function sum(a,b) {
	retrun a+b
}

이 방법은 변수든 상수든 함수든 한 파일에서 한 번 밖에 쓸 수 없다.
만약 sum이라는 함수에 export default를 사용했다면 다른 변수, 상수, 함수에서는 export default를 사용할 수 없다.

---

import

export가 내보는 것이었다면 import는 export로 내보내진 것을 가져오는 것이다.

import sum from './index'

sum(1,2) // 3

위 예시는 expoer default의 sum함수를 받아온 것이다.
그리고 index.js에서 js는 생략이 가능하다.

export가 내보내는 방법이 2가지가 있듯이 받는 방법도 2가지이다.

1.import {sum} from "./index"
이 방법은 단순히 export만을 사용할 때 받아오는 방법이다.

import {sum, hi} from "./index"

sum(1+2) //3
hi() //hi

이 방법은 export된 변수, 상수, 함수등을 갯수에 상관없이 가져올 수 있다. 이 때 {}를 써야하며 정의된 이름을 그대로 써야한다.

2. import suum from "./index"

import sum from "./index"

이 방법은 export default를 사용했을 떄 사용한다. 딱 하나만 가져올 수 있으며 {}없이 가져온다. 이름은 sum으로 사용해도 되고 다른 이름으로 사용이 가능하다.