index.js

index.js 파일의 역할

기본 내보내기

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

 

파일 구조

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

 

DetailPage.js

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

export default DetailPage;

 

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

index.js

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

 

App.js (index.js 사용)

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

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

export default App;

 

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 경로를 명시적으로 지정해야 함