React 구성 요소 디렉토리에서 index.js 파일은 어떻게 작동합니까?

React 구성 요소 디렉토리에서 index.js 파일은 어떻게 작동합니까?

저는 방금 새로운 React 프로젝트를 시작했고, 기본적으로 각각의 컴포넌트에 따라 파일을 그룹화하는 다음 패턴을 사용하기로 결정했습니다.

├── actions
│   ├── LaneActions.js
│   └── NoteActions.js
├── components
│   ├── App
│   │   ├── App.jsx
│   │   ├── app.css
│   │   ├── app_test.jsx
│   │   └── index.js
│   ├── Editable
│   │   ├── Editable.jsx
│   │   ├── editable.css
│   │   ├── editable_test.jsx
│   │   └── index.js
...
│   └── index.js
├── constants
│   └── itemTypes.js
├── index.jsx
├── libs
│   ├── alt.js
│   ├── persist.js
│   └── storage.js
├── main.css
└── stores
    ├── LaneStore.js
    └── NoteStore.js

이 경우 index.js가 어떻게 동작하는지가 혼란스럽습니다.인용한 바와 같이:

index.js 파일은 컴포넌트의 쉬운 진입점을 제공하기 위해 준비되어 있습니다.노이즈를 더해도 수입은 단순해집니다.

이 기사에서는 이 파일들의 내용을 자세히 설명하지 않습니다.Editable 컴포넌트의 경우 무엇을 해야 합니까?Editable.jsx ★★★★★★★★★★★★★★★★★」index.js상적적 ?? ?? ??? ?? ???

" " " " "''로 되어 있습니다.Editable에는 그 이 포함되어 .Editable.jsx컴포넌트 코드는 파일 안에 남습니다.

그럼 인덱스는 무엇입니까?인덱스 내에서는 다음과 같이 간단하게 실행할 수 있습니다.

import Editable from './Editable.jsx';

export default Editable;

그리고 이것이 마지막입니다.이것은 다른 컴포넌트나 컨테이너 내부에서 이 작업을 수행할 수 있기 때문에 유용합니다.

import Editable from '../Editable';

입니다.index.js기본적으로 파일을 저장하기 때문에 더 이상의 정보는 필요하지 않습니다..index.js수입하다「 」가 .index.js작업을 : "파일": "파일"

import Editable from '../Editable/Editable';

좀 어색하네요.인덱스 파일이 컴포넌트를 Import하여 내보내기만 하는 것은 원하지 않습니다. 하는 가 the에 넣는 입니다.index.js으로 Editable.jsx조금도.그것은 당신에게 달렸으니, 당신이 더 좋아하는 방식을 택해도 좋습니다.

컴포넌트 패턴별로 이 디렉토리를 사용하여 모듈을 깔끔하게 구성하고 액세스할 수 있는 방법을 찾고 있는 경우, 위의 디폴트 내보내기 예에서는 여러 파일(예를 들어 리듀서 디렉토리가 있는 구조)을 사용할 수 없습니다.

── reducers
│   ├── todoReducer.js
│   └── filterReducer.js
│   └── themeReducer.js
│   └── index.js
├── components
    ├── App.js
    ├── app.css
    └── index.js

reducers/index.js는 다음과 같습니다.

// index.js
import filterReducer from './filterReducer';
import todoReducer from './todoReducer';
import theme from './themeReducer';

export { filterReducer, todoReducer, theme };

...원래의 파일에 디폴트로 내보낸 파일인지, 이름이 붙은 파일인지에 관계없이, export라고 하는 이름이 붙여져 있습니다.또, App.js에서는 다음과 같이 클린하게 사용할 수 있습니다.

// App.js
import { filterReducer, todoReducer, theme } from '../reducers';

이 모든 노이즈를 회피할 수 있습니다.

import filterReducer from './reducers/filterReducer';
import todoReducer from './reducers/todoReducer';
import theme from './reducers/theme';

모듈 네임스페이스에도 활용할 수 있습니다.

//MyNamespace/index.js

import Mod1 from './Mod1' //assumes ./Mod1.js
import Mod2 from './Mod2' //assumes ./Mod2.js

export{
  Mod1,
  Mod2
}

그런 다음 네임스페이스를 사용하여 다른 파일을 가져올 수 있습니다.

//SomeOtherFile.js

import * as NamespaceToUse from './MyNamespace'

// Then access as:
NamespaceToUse.Mod1
NamespaceToUse.Mod2

프론트 엔드 웹 응용 프로그램에 인덱스를 사용하면(React로 작성되었는지 여부에 관계없이) 실질적인 이점이 없습니다.오히려 그들은 그러한 프로젝트에서 최적의 작업에 해롭다.

Import를 조직화하는 것은 자동화되어야 하며 개발자는 Import에 전혀 관여하지 않아야 합니다.필요한 모듈(컴포넌트 유무)의 Import는 IDE 제안(Intelij, WebStorm, VSC 등 모든 기능)에 의해 자동화됩니다.컴포넌트의 이름을 입력하기만 하면 됩니다.

도구를 사용하여 Import 구조를 으로 구성하고 할 수 .prettier-plugin-organize-imports경합이 Import를 는 없습니다. Import하다

애플리케이션이 증가하는 경향이 있어 미래의 컴포넌트 폴더 구조가 확정적이지 않은 상황에서 인덱스 파일(데드웨이트)을 유지하는 것은 불필요한 오버헤드입니다.또한 대부분의 IDE는 Ctrl/CMD에서 컴포넌트 이름을 클릭하면 의도한 컴포넌트 대신 인덱스 파일이 열립니다.이것은 귀찮고, 필요한 장소에 도달하는 데 방해가 됩니다(또한 많은 코드를 작성해야 하고, 매분마다 수십 개의 컴포넌트를 조사해야 하는 경우에는 매우 번거로운 작업이 됩니다).

인덱스가 유용한 것은 (앱이 아닌) 모듈러 라이브러리를 작성할 때 라이브러리의 실제 사용자를 위해 Import를 구성하는 경우입니다.또한 내부 코드와 공용/문서화된 코드를 분리해야 합니다.라이브러리는 보다 견고한 구조를 가지며, 특정 분리에 따라 더 명확한 최상위 모듈을 사용하는 경향이 있습니다. 따라서 새로운 공개/문서화된 기능을 공개하거나 폐지할 필요가 없는 한 인덱스를 편집할 가능성이 낮아집니다.이 경우 인덱스는 라이브러리의 인터페이스를 효과적으로 작성하므로 유용합니다.

위의 인덱스에 따르면 웹 어플리케이션 소스에 유용한 목적은 없지만 안타깝게도 일부 프로젝트에서 유행하는 것 같습니다.

현재 이와 같은 컴포넌트 인덱스 파일이 있습니다.

/components/index.js
export { AutoCompleteInput } from './AutoCompleteInput';
export { AutoScrollWidgetRepositioning } from './AutoScrollWidgetRepositioning';
export { BrowserMessages } from './BrowserMessages';
export { CheckboxInput } from './CheckboxInput';

그리고 이런 컴포넌트 인덱스 파일은

/components/AutcompleteInput/index.js
/* eslint-disable import/prefer-default-export */
export { default as AutoCompleteInput } from './AutoCompleteInput';

즉, 이와 같은 컴포넌트를 다른 컴포넌트로 Import할 수 있습니다.

/componnts/Form/Form.jsx
import {
  AutoScrollWidgetRepositioning,
  BrowserMessages,
  HeadSection,
  InitialWidgetLoadEventManager,
  PageLayout,
} from '..';

이것은 수입 트리를 깨끗하고 깔끔하게 만들지만, 이것의 단점은 현재 내가 알고 있는 것이 있습니다.dependency cycle에러(즉, Import 자체를 Import 하고 있는 경우)에 문제가 있습니다.인덱스 파일이 실제 컴포넌트가 되는 것이 좋을지도 모른다는 결론에 도달하고 있습니다.【【가져오기】import { CheckboxInput } from './CheckboxInput/CheckboxInput'로서 머물다import { CheckboxInput } from './CheckboxInput'.

TLDR: 인덱스 파일은 에코를 방지하지만 너무 많이 사용하지 마십시오. 그렇지 않으면 주기적인 Import 문제가 발생할 수 있습니다.

언급URL : https://stackoverflow.com/questions/44092341/how-do-index-js-files-work-in-react-component-directories