index.js 파일의 역할

파일 구조

/src
  └── /components
      ├── DetailPage.js
      ├── AnotherComponent.js
      └── index.js

 

DetailPage.js

// DetailPage.js
const DetailPage = () => {
  return <div>Detail Page Content</div>;
};

export default DetailPage;

 

1. index.js를 사용하는 경우

 

index.js

// components/index.js
export { default as DetailPage } from './DetailPage';
export { default as AnotherComponent } from './AnotherComponent';

index.js의 역할

• 폴더의 기본 내보내기: index.js 파일은 해당 폴더의 기본 내보내기(default export) 역할을 함
• 다른 파일에서 이 폴더를 import하면 자동으로 index.js의 내용을 가져올 수 있음

 

App.js (index.js 사용)

// App.js
import { DetailPage, AnotherComponent } from './components';

function App() {
  return (
    <div>
      <h1>Welcome to the App</h1>
      <DetailPage />
      <AnotherComponent/>
    </div>
  );
}

export default App;

 

이제 다른 파일에서 DetailPage ,AnotherComponent컴포넌트를 가져올 때, 폴더 이름만 사용하면 됨

 

2. index.js를 사용하지 않는 경우

 

App.js (index.js 미사용)

// App.js
import DetailPage from './components/DetailPage';

function App() {
  return (
    <div>
      <h1>Welcome to the App</h1>
      <DetailPage />
    </div>
  );
}

export default App;

 

• index.js를 사용하는 경우: App.js에서 ./components 경로만으로 DetailPage를 import할 수 있다.
• index.js가 DetailPage의 기본 내보내기를 다시 내보내기 때문에 가능한 일.
• index.js를 사용하지 않는 경우: App.js에서 DetailPage를 import할 때, ./components/DetailPage 경로를 명시적으로 지정해야 함