문제

갑작스럽지만 여기에 이러한 샘플 구성 요소가 있습니다. (이 기사에는 약간의 React 요소가 포함되어 있지만 React를 모르더라도 아마도 알 수 있습니다.)

sample.tsx

export const Sample: FC<Props> = () => {
    return(<div>sample</div>);
}

이것은, 아무래도 이런 느낌으로 import해 사용할 수 있을 것 같습니다.

sampleContainer.tsx

import { Sample } from './sample.tsx';
import { connect } from 'react-redux';

const mapStateToProps = .... ;　// 割愛

export default connect(mapStateToProps)(Sample);

자, 여기서 export default 되고 있는 이 아이는 도대체 어떻게 import 하면 다른 장소에서 사용할 수 있을까요.

대답

대답은 다음과 같습니다.

routing.tsx

import SampleContainer from './sampleContainer.tsx';

const participantRoutes: Routes = [
  {
    path: "/activity",
    component: SampleContainer
  }
];

파일명과 대응하고 있는 것일까? 라고 언뜻 보일지도 모르지만, 이것은 유일한 대답이 아닙니다. 이것도 괜찮습니다.

routing.tsx

import SC from './sampleContainer.tsx';

const participantRoutes: Routes = [
  {
    path: "/activity",
    component: SC
  }
];

라고 할까, 뭐든지 좋다. (Syntax상은입니다만)
어때요?

생각해 보면 매우 자명한 일이고 납득이 가는 것입니다만, React로 Redux할 때까지 이것을 의식하지 않으면 안 되는 장면이 없었기 때문에 전혀 눈치채지 않고, 이상하게 생각하고 있었습니다.

해설

포인트는 export default입니다. 이것은 말 그대로, 그 파일의 디폴트로 뒤에 오는 것을 export한다고 하는 의미가 됩니다.export default 사용한 것을 사용하고 싶을 때, import 하는 측은 임의의 이름을 붙일 수가 있습니다. 이것은 이것이 기본값이 될 것이라고 선언하기 때문입니다.
이것은 자연스럽게 이해할 수 있다고 생각합니다만, 디폴트를 복수 지정할 수 없습니다. 그러므로, 1 파일내에 조금 전의 connect와 같은 export default 선언을 복수 쓰면 에러가 나옵니다.
과연, 그래서 이름을 좋아하게 붙여도 제대로 connect를 사용할 수 있었군요

자세한 설명: MDN 내보내기