ES6 모듈 시스템

ES6 모듈 시스템

• export default

  • 디폴트로 export하면 {} 없이 임포트할 수 있고, 이름도 마음대로 지을 수 있다. 예를 들어 export default a 하면 임포트하는 쪽에서 import b 라고 할 수 있다.

• export 변수명

  • 디폴트를 붙이지 않고 export하면 임포트하는 쪽에서는 {}를 사용해야 하고 이름도 그대로 사용해야 한다.
  • 하지만 이름을 변경하고 싶을 경우 as를 사용하면 된다. 예를 들어 export const c 는 임포트하는 쪽에서 import {c as d} 라고 할 수 있다.

• import *, export *

  • * 로 import, export할 수 있다. 기본적으로 파일 내의 모든 것을 지칭하고, default도 포함한다.

  • 예를 들어 actionTypes.js 파일이 있다고 하자. 액션 타입을 변수에 담아 export하고 있다. 아래는 post 관련 액션들이라서 post 폴더 밑의 actionTypes.js에 있다.

    export const ADD_POST = 'ADD_POST';
    export const GET_POSTS = 'GET_POSTS';
    export const LIKE_POST = 'LIKE_POST';
    

  • 또 comments 폴더 밑에 comments 관련 actionTypes.js가 있다.

    export const ADD_COMMENT = 'ADD_COMMENT';
    export const GET_COMMENTS = 'GET_COMMENTS';
    

  • 이처럼 각 폴더 밑에 존재하는 actionTypes들을 rootActionTypes.js에 모은다.

    export * from './users/actionTypes';
    export * from './token/actionTypes';
    export * from './posts/actionTypes';
    export * from './comments/actionTypes';
    

  • 그러면 이를 임포트하는 쪽에서는

    import * as ActionTypes from '@/data/rootActionTypes';
    
    export function writePost(contents, user) {
        return {
            type: ActionTypes.ADD_POST,
            contents,
            user,
        };
    }
    

    *를 사용해서 모든 actionTypes 변수들을 임포트하고, as를 사용해서 ActionTypes라는 변수에 담아서 사용한다. 그리고 사용하고자 하는 멤버변수들을 . 으로 접근해서 사용한다.