[JS] 모듈 다시 내보내기 export from (활용)

모듈 다시 내보내기

export from 을 사용하면 가져온 모듈을 다시 내보낼 수 있다.

export from을 사용하지 않는다면 아래처럼 import와 export를 따로 선언해야 한다.

import likeFood from './food.js';
export {likeFood};

하지만 export from을 사용한다면 이처럼 한줄로 가능하다.

export {likeFood, disLikeFood} from './food.js';

default export 다시 내보내기

그렇다면 default export는 어떻게 export from을 사용할 수 있을까 named export같이 아래처럼 사용하면 될까?

export Auth from './Auth.js';

정답은 아니다! named export처럼 export from을 사용하면 에러가 발생한다.

따라서 아래처럼 사용해야 한다.

export {default as Auth} from './Auth.js';

named export와 default export가 있는 모듈에서 export * from을 사용하면 named export만 다시 내보내진다. 따라서 default export까지 내보내고 싶다면 아래처럼 따로 내보내야 한다.

export * from './Auth.js';
export {default} from './Auth.js';

모듈 다시 내보내기 활용

흔히 모듈을 가져올 때 아래처럼 가져오는 모듈 수 만큼 코드가 길어진다.

import Auth from './Auth.js'
import Todo from './Todo.js'

하지만 폴더의 index 파일에서 모듈을 다시 내보내 import 코드를 한줄로 줄일 수 있다.

아래의 폴더 구조를 기준으로 설명하겠다.

📦pages
 ┣ 📂Auth
 ┃ ┣ 📜index.jsx
 ┃ ┗ 📜styled.js
 ┣ 📂Todo
 ┃ ┣ 📜index.jsx
 ┃ ┗ 📜styled.js
 ┗ 📜index.js

아래의 코드처럼 pages의 index파일에서 export from으로 모듈을 다시 내보낸다.

// pages/ index.js
export { default as Auth } from './Auth';
export { default as Todo } from './Todo';

그럼 import하는 코드를 한줄로 줄일 수 있다. 만약 프로젝트 규모가 커서 import할 코드가 많다면 더 유용하게 사용 될 것 같다.

// app.js
import { Auth, Todo } from './pages';