리액트를 사용하다 보면 필수적으로 이용되는 문법이 export 와 import 이다. 하지만 , export 의 사용과 import 사용이 제 각각이라 이를 정리해보려고 한다.

모듈이란?

모듈은 마치 레고의 한 조각과 같다. 리액트가 각광받는 이유도 컴포넌트 하나하나를 각각 관리를 할수 있기 때문이다.

js 파일 하나하나가 모듈이다. 때문에 이 모듈들을 사용하기 위해서는 한 컴포넌트에서 다른 컴포넌트를 불어와야 하는데 이때 , export 와 import 를 사용하는것이다.

Export

모듈 하나를 다른 모듈에서도 이용 할 수 있게 내보내려면 export 해야한다. export 에는 크게 두가지 방법이 있는데,
하나는 해당 모듈에서 딱 하나만 내보내는 방법,
다른 하나를 모듈 내 여러 함수들을 내보내는 방법이다.

하나만 내보내는 방법은 리액트에서 자주 법했을
export default 방법이다.

const person = () => {
	return(
		<div>
		</div>
	)
}
export default person;	
//이 파일에는 person이라는 이름의 유일한 모듈 하나만 export 할 수 있다.

여러 함수를 내보내는 방법은 아래와 같이 이용한다. 이를 named export 라 부른다.

export function person(user) {
  console.log(`Hello, ${user}!`);
}

export function name(user) {
  console.log(`I'm ${user}!`);
}

export 를 중복해서 쓰지 않고 한번에 내보내고 싶을 땐 아래와 같이 이용한다.

function person(user) {
  console.log(`Hello, ${user}!`);
}

function name(user) {
  console.log(`I'm ${user}!`);
}

export {person, name};

import

import 규칙은 default export 와 named export가 다르다.
default export 는 해당 모듈에 유일한 모듈이기 때문에 export 했을 때 정해준 이름을 굳이 쓰지 않고 다른 이름으로 바꿔도 된다. 하지만 코딩 컨벤션상 , 혼란을 방지하기 위해 그대로 사용하곤 한다.

named export 는 해당 모듈에 여러 모듈 중 하나 이기 때문에 export 했을 때 정해준 이름을 그대로 사용해야한다. 이는, default export 처럼 이름을 바꿔 import 한다면 오류가 발생한다. 또한 중괄호를 써야한다.

예시)

import person from './person.js'	//exported as default
import {person, name} from './person.js'	//export as named modules

하지만 named export 의 이름을 바꿔서 import 시키고 싶으면 'as' 를 사용하면 된다.

import {person as me, name as family} from './person.js'

여러가지 named export 를 한번에 import 시키고 싶으면 '*' 를 사용하면 된다.
CSS 스타일링 할 때 모든 요소를 포함시키고 싶을 때 많이 보았을 것이다.

꺼내서 쓰고 싶을 땐 , export 시켰던 각각의 이름을 사용한다.

import * as me from './person.js'

me.person('Lee');
me.name('Lee');