[React] Default Export와 Named Export

🏷️ Default Export

Default로 선언된 모듈은 하나의 파일에서 단 하나의 변수 또는 클래스 등만 export 할 수 있습니다.

// import
import LoginComponent from './LoginComponent';

// export
function LoginComponent() {
	// 생략
}

export default LoginComponent;

모듈의 이름이 무엇이든 간에 default로 내보낸 모듈은 어떤 이름으로든지 import할 수 있습니다.

import LoginComponent from './LoginComponent';
import LogoutComponent from './LogoutComponent';
import FooterComponent from './FooterComponent';
import HeaderComponent from './HeaderComponent';
import ListTodosComponent from './ListTodosComponent';
import ErrorComponent from './ErrorComponent';
import WelcomeComponent from './WelcomeComponent';

단, 하나의 파일 당 한 개의 모듈만 default export할export 할 수 있기 때문에 어떤 이름을 붙이든 상관이 없습니다. 하지만 let, const를 바로 default export 할 수는 없습니다.

// 잘못된 예시
export default const test = () => {};

🏷️ Name Export

한 파일 내에서 여러 변수또는 클래스 등을 export 할 수 있습니다.

// import 1개만 할 경우
import { useAuth } from './security/AuthContext';

// import 2개 이상 할 경우
import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';

// export
export const AuthContext = createContext();
export const useAuth = () => useContext(AuthContext);

Named export방식으로 내보내기를 하면, 해당 모듈을 불러오고자 하는 파일에서는 중괄호로 감싸서 불러와야 합니다. AuthContext.js파일에서 2개 이상의 모듈을 내보내도 불러올 때는 한 개만 불러와서 사용해도 됩니다.

// as로 이름을 바꿔서 사용하는 방법
import { useAuth as auth } from './security/AuthContext';

Default export 방식으로 내보내기를 했을 때 마음대로 이름을 정해서 불러왔듯이, Named export 방식으로 내보내기를 했을 때도 이름을 as(별칭)를 통해서 다시 정해서 불러올 수 있습니다. 위 예시같이 useAuth모듈을 불러올 때, import { useAuth as auth } from ~ 이런 식으로 이름을 재정의할 수 있습니다.

📖 Reference

eunjin