[javascript/typescript] export와 import 방식을 정확히 알고 쓰기

JavaScript 및 TypeScript에서 모듈을 내보내고 가져오는 방식은 내보내기(export) 방식에 따라 달라집니다. 두 가지 주요 방식이 있습니다: 기본 내보내기(default export)와 이름을 지정한 내보내기(named export).

1. 기본 내보내기 (Default Export):
   • 파일 당 하나의 기본 내보내기만 가능합니다.
   • 가져올 때는 임의의 이름을 사용할 수 있습니다.
   • 중괄호 없이 가져옵니다.

   // 내보내기 (ProtectedRoute.tsx 파일)
   export default ProtectedRoute;
   
   // 가져오기 (다른 파일)
   import ProtectedRoute from './components/Common/ProtectedRoute';

2. 이름을 지정한 내보내기 (Named Export):
   • 한 파일에 여러 개의 export가 가능합니다.
   • 가져올 때는 내보낼 때 사용한 이름과 동일한 이름을 사용해야 합니다.
   • 가져올 때 중괄호를 사용합니다.

   // 내보내기 (다른 파일 예시)
   export function ProtectedRoute() { /* ... */ }
   
   // 가져오기 (또 다른 파일)
   import { ProtectedRoute } from './components/Common/ProtectedRoute';

import ProtectedRoute from './components/Common/ProtectedRoute';는 기본 내보내기된 함수나 클래스를 가져올 때 사용하고, import { ProtectedRoute } from './components/Common/ProtectedRoute';는 이름을 지정한 내보내기를 가져올 때 사용합니다.

따라서, export default ProtectedRoute;로 내보낸 경우, import ProtectedRoute from './components/Common/ProtectedRoute'; 방식으로 가져와야 하며, {} 중괄호를 사용하지 않습니다.

이름을 지정한 내보내기와 기본 내보내기를 구분하는 것은 중요합니다. 코드의 다른 부분에서 이 컴포넌트를 임포트할 때 혼동이 발생할 수 있기 때문입니다. 이름을 지정한 내보내기를 사용할 때는 항상 내보낼 때의 이름과 동일한 이름을 사용하여 가져와야 합니다.