export from 사용하기

클린코딩 철학을 따라 코드를 모듈화하고 기능대로 분리해서 사용하다 보니 import할 컴포넌트나 메소드들이 점점 늘어가는 것을 문득 체감했다.

 

파일 최상단에 import 줄이 길어지면 export ... from을 써서 코드를 정리하는 것을 고려해보자.

Image by Kosta from Pixabay

import한 즉시 export

export ... from은 다른 파일에서 코드를 import함과 동시에 해당 파일에서 다시 export하는 문법이다. export ... from을 사용하면 여러 모듈에서 import해온 함수, 상수, 컴포넌트 등을 한 곳에서 한꺼번에 export할 수 있다.

// aggregator.js
// 여러 파일에서 import해온 것을 export...from을 써서 한 파일에서 export하도록 함
export { 유틸함수1 } from "./파일1.js"
export { 유틸함수2 } from "./파일2.js"
export { 컴포넌트 } from "./파일3.js"

// main.js
// 파일1, 파일2, 파일3에서 각각 import하는 대신 aggregator.js에서 다 import할 수 있음
import { 유틸함수1, 유틸함수2, 컴포넌트} from "./aggregator.js"

 

특이 케이스: default export

default export는 따로 네이밍을 해주거나 { }에 감싸서 export해야 한다.

export {default as User} from './user.js';
// 또는
export {default} from './user.js';

 

만약 * 와일드카드를 써서 모든 것을 export하려고 할 경우 default만 제외한 나머지만 export된다. 따라서 named export와 default export가 섞여있으면 따로따로 export해줘야 한다.

export * from './user.js'; // named export를 다시 내보내기
export {default} from './user.js'; // default export를 다시 내보내기

 

 

참고

• https://ko.javascript.info/import-export