javascript - Export (Default vs Named)

 

아래 두 방식 중 어떤 것을 사용할지는 프로젝트의 구조와 컨벤션에 따라 결정

일반적으로 Redux에서는 slice 파일에서 reducer는 default export

액션들은 named export로 내보내는 방식이 많이 사용

구문	export default something;	export const something = ...;
가져오기 방식	import something from "./file";	import { something } from "./file";
가져오는 이름	임의로 지정 가능	내보낸 이름과 동일해야 함
용도	모듈에서 하나의 기본값 제공 시	모듈에서 여러 값을 내보낼 때

 

1. import reducer from "./todoSlice";

• Default Export (기본 내보내기) 를 사용할 때 사용
• 모듈에서 default export로 내보낸 값(객체, 함수, 변수 등)을 가져옴
• 가져오는 변수 이름은 임의로 정할 수 있음

//todoSlice.js
const reducer = (state, action) => { /* reducer logic */ };
export default reducer;  //Default Export

//Importing default export reducer
import todoReducer from "./todoSlice";

• 모듈에서 default export로 내보냈기 때문에 todoReducer라는 이름은 임의로 지정
• import something from 구문은 항상 default export를 가져옴

2) import { reducer } from "./todoSlice";

• Named Export (이름 기반 내보내기) 를 사용할 때 사용
• 모듈에서 named export로 내보낸 특정 이름을 가져옴
• 가져오는 변수 이름은 내보낼 때 지정된 이름과 동일해야 함

//todoSlice.js
export const reducer = (state, action) => { /* reducer logic */ }; 
//Named Export

//Importing named export reducer
import { reducer } from "./todoSlice"; //import {reducer as todoReducer} ...

• reducer는 todoSlice.js에서 명시적으로 내보낸 이름
• import { } 구문은 named export를 가져올 때만 사용