ES6 import, export

특정 js 파일의 클래스나 함수를 다른 곳에서 import 받아서 사용하려면
기본적으로 가장 하단에 export 처리가 되어 있어야 한다.

export는 아래와 같이 하면 된다.

export default counter;
export const increase = () => ({type: INCREASE);

./counter.js 파일을 import 받는다고 가정하면 아래와 같이 하면 된다.
보면 알겠지만 export default 로 내보낸 것들은 그냥 명시하면 되지만
export 로 내보낸 것들은 {}로 묶어줘야 한다.

import counter, { increase } from './counter';

만약 import 받으려는 파일명이 index.js 이고
modules 디렉토리 하위에 있다면
아래와 같이 from 절에 디렉토리만 명시하면 된다.

import rootReducer from './modules';

 

이런 방식은 컴포넌트에도 사용되는데 만약 여러개의 컴포넌트를 조합해서 만드는 페이지가 있다면

import 가 너무 많아 지는거 아니냐? 

리액트에서는 컴포넌트를 되도록 작게 나누는 것을 선호하자나?

진짜 import를 일일히 추가해서 사용해야 하는 것인지 뭔가 다른 방법이 있는건지 확인이 필요할 듯 하다...

 

그리고 또 하나.

다른 곳에서 import 할게 아니라면 export 굳이 할 필요 없는거냐?

-> export default 는 무조건 있어야 한다.