ES6 : Named Export시 주의점

나는 도서를 통해 리액트 신문법을 공부해본 경험이 있는데 그 책에서는 주로 컴포넌트에서 export할 때 export default 하기 보다, export const 컴포넌트이름 = () => { } 로 전개해서 사용하더라.

export const 이렇게 전개하는 문법이름을 Named Export라고 한다. ES6 모듈의 일부라고 한다.

 

 

나도 이 문법으로 배우다보니 export할 때는 export const를 바로 외쳐버린다.

그런데 이 방법을 사용할 때에는 주의점이 있다는 것을 오늘 알았다!

 

 

주의점

App.js에서 Named Export한 컴포넌트를 import할 때에는 `{ }`를 사용해야 한다.

import { Home } from './components/Main/Home';

 

정리

	Named Export	Default Export
특징	컴포넌트 안에서 import할 자신 컴포넌트 이름을 미리 지어놓는다.	import할 때 컴포넌트 별칭을 만들 수 있다.
사용처	하나의 파일에서 여러 컴포넌트나 함수를 한 파일에서 내보낼 때 사용한다.	하나의 컴포넌트만 나열되는 단순한 파일일 경우 사용이 간결하다.
장점	- 한 디렉토리에서 여러 컴포넌트들을 한 문장안에 import할 수 있다. ex) import { Home, Search } from './components/Main/Home';	- import시 원하는 이름으로 변경할 수 있다.
단점	반드시 export할 때 붙여놓은 이름을 사용해야 한다.	한 파일당 하나씩만 import 가능하다.
export시	export const Home = ...	export default Home
import시	import { Home } from ...	import Home from ...
정리	- 여러 개의 컴포넌트/함수/변수/클래스를 내보낼 때 - 하나의 파일에 여러 개의 Named Export를 정의하고 싶을 때	단일 컴포넌트만 내보낼 때