typescript에서는 Re-export로 한곳에 모아서 export를 할 수 있다.
.
├── App.tsx
├── components
│ ├── Layout.tsx
│ ├── Main.tsx
│ └── index.ts
└── index.tsx
export 할 때는, named export를 해야한다. (default로 하닌깐 error가 발생하였다.)
// components/Main.tsx
export const Main: React.FC = () => {
return (
<div className='main-content'>
<div>Main Content</div>
</div>
);
};
// components/index.ts
export * from './Layout';
export * from './Main';
index.ts에서 named import를 한다.
import { Main } from '.';
export const Layout: React.FC = () => {
return (
<div>
<Main />
</div>
);
};
// App.tsx
import { Layout } from './components/Layout'; // 직접 가져오려고 하는 경우 - 에러발생
function App() {
return (
<div>
<Layout />
</div>
);
}
export default App;
// ------------------------------------------------------------------
import { Layout } from './components'; // index.ts 에서 가져옴 - 에러 없음
function App() {
return (
<div>
<Layout />
</div>
);
}
export default App;
Uncaught ReferenceError: Cannot access 'Layout' before initialization
at Module.Layout (profile/static/js/main.chunk.js:259)