index.js 파일 사용법(올바르게)

Index.js 파일은 index.html 파일과 같습니다. 사양이 제공되지 않으면 디렉토리가 인덱스 파일을 가리킵니다. 인덱스 파일은 동일합니다. 자바스크립트든 타이프스크립트든 상관없습니다.
편의상 이 문서에서는 index.js를 예로 사용하겠습니다.
즉, 디렉토리가 있는 경우

📦demo  
 ┣ 📜file1.js  
 ┣ 📜file2.js  
 ┣ 📜file3.js  
 ┗ 📜index.js

demo 디렉토리를 가리키면 demo/index.js를 가리킬 것입니다.

꽤 깔끔해보이고,
제대로 사용하면 코드베이스를 깨끗하게 유지하는 데 도움이 될 수 있습니다.
그러나 모든 곳에서 부주의하게 사용하면 가독성과 접근성이 모두 저해됩니다.

"Too much of a good thing can be a bad thing,"
- William Dudley

다음은 index.js 파일 및 해당 솔루션의 일반적인 잘못된 구현입니다.

#### 디렉토리에 색인 파일만 있는 경우

 ┣ 📂demo  
 ┃ ┗ 📜index.js  
 ┣ 📂demo1  
 ┃ ┗ 📜index.js  
 ┣ 📂demo2  
 ┃ ┗ 📜index.js  
 ┗ 📂demo3  
 ┃ ┗ 📜index.js

데모/index.js

export const num = 100;

작동하는 데모 디렉토리를 가리켜 index.js 파일의 내용에 액세스하려고 합니다.

import num from './demo';

이것은 index.js 파일의 최악의 구현입니다.
문제가 무엇입니까?

여러 개의 동일한 이름 파일

index.js 파일의 이름을 보면 어떤 index.js 파일이 무엇을 하는지 말하기 어렵습니다

.

은 파일에 직접 액세스할 수 없습니다. demo가 디렉토리이고 demo/index.js와 demo가 동일한 대상을 가리키기 때문에 프로젝트 전체에서 데모 파일을 검색할 수 있지만 논리가 있기 때문에 표시되지 않습니다. demo/index.js 파일

폴더에 파일이 하나만 있으면 디렉토리를 사용할 필요 없이 파일만 사용합니다.
이 경우의 해결책은 다음과 같습니다.

 ┣ 📜demo.js  
 ┣ 📜demo1.js  
 ┣ 📜demo2.js  
 ┗ 📜demo3.js

demo.js

export const num = 100;

위의 가져오기는 여전히 작동하며 이제 파일을 직접 검색할 수 있습니다.

#### 인덱스 파일에 구성 요소를 쓰는 것은 또 다른 나쁜 사용 사례입니다.

📦demo  
 ┣ 📜file1.js  
 ┣ 📜file2.js  
 ┣ 📜file3.js  
 ┗ 📜index.js

데모/index.js

import React from 'react';

const SomeComponent = () => {
  return <div>some Component</div>;
};

export default SomeComponent;

이제 구성 요소가 기본 내보내기이므로 어떤 이름으로든 구성 요소를 가져올 수 있습니다. 이 구성 요소에서 Demo로 가져오겠습니다.

이제 이렇게 구성 요소를 가져올 수 있습니다.

import Demo from './demo';

데모 구성 요소는 유효한 구성 요소이지만 내 프로젝트에서 데모 구성 요소를 검색하면 아무 것도 찾을 수 없으며 데모 파일을 검색해도 데모 파일을 찾을 수 없습니다.

이는 index.js 파일을 사용하여 내보내기만 하면 해결할 수 있습니다.
예:

📦demo  
 ┣ 📜Demo.jsx  
 ┣ 📜file1.js  
 ┣ 📜file2.js  
 ┣ 📜file3.js  
 ┗ 📜index.js

데모/Demo.jsx

import React from 'react';

const SomeComponent = () => {
  return <div>some Component</div>;
};

export default SomeComponent;

추신: 이것은 예시 목적으로만 제공되며 혼동을 피하기 위해 파일 이름과 구성 요소 이름을 동일하게 유지하십시오.

이제 위의 가져오기가 계속 작동합니다.

import Demo from './demo';

이 경우 구성 요소 이름으로 검색하는 것은 여전히 ​​작동하지 않지만 최소한 파일 이름으로 검색할 수 있습니다.

index.js 파일을 사용하여 내보내기 및 기본 내보내기를 모두 수행할 수 있습니다.

📦demo  
 ┣ 📜Demo.jsx  
 ┣ 📜file1.js  
 ┣ 📜file2.js  
 ┣ 📜file3.js  
 ┗ 📜index.js

데모/file1.js

export const str1 = 'file1';

데모/file2.js

export const str2 = 'file2';

데모/file3.js

export const str3 = 'file3';

데모/Demo.js

import React from 'react';

const SomeComponent = () => {
  return <div>some Component</div>;
};

export default SomeComponent;

마지막으로 index.js 파일

index.js

export { str1 } from './file1';
export { str2 } from './file2';
export { str3 as customExport } from './file3';
export { default } from './Demo';

처음 세 가지 예는 내보내기를 수행하고 있습니다.
세 번째는 내보내는 동안 내보내기에 별칭을 지정하는 것입니다.
네 번째는 기본 내보내기를 데모 구성 요소로 내보내는 것이며 이 index.js 파일에도 기본값입니다.

이와 같이 다른 파일의 기본 내보내기를 일반 파일로 내보낼 수도 있습니다.

export { default as NormalExport } from './Demo';

이와 같이 기본 내보내기를 수행할 수도 있습니다.

export default str = 'inexFileName';

이제 './demo' 위치에서 이러한 모든 내보내기를 가져올 수 있습니다.

import str, { str1, str2, customExport, NormalExport } from './demo';