인덱스 명명 지옥, 정의 및 피하는 방법

나도 같은 함정에 빠지곤 했어…

모든 색인 파일을 확인합니다.

익스플로러에서 보면 이렇습니다



이것은 훌륭하게 작동하며 실제로 사용하기 쉽습니다. 당신은 할 수 있습니다

import MyComponent from './components/MyComponent

하지만 편집기에서 편집할 때 보기 흉하고 너무 많은 공간을 차지합니다. 또한 모든 파일의 이름이 지정되기 때문에 빠른 파일 탐색을 망칩니다…

이 경우 약간의 중복성을 추가하는 것이 좋습니다. 구성 요소가 index 인 경우 모든 파일의 이름을 적절한 확장자를 사용하여 BirthdayItem로 바꾼 다음 구성 요소를 내보내는 BirthdayItem 파일을 만드십시오. 그래서 당신은 필요하지 않습니다

import MyComponent from './components/MyComponent/MyComponent

작동 방식을 살펴보겠습니다.

훨씬 더 좋아졌습니다. 이제 편집 중인 내용을 실제로 볼 수 있습니다.

탐색기도 깨끗함

보시다시피 열린 편집기와 탐색기가 훨씬 더 읽기 쉽습니다. 빠른 파일 검색은 원하는 것을 더 쉽게 찾을 수 있도록 더 잘 반응합니다.

이제 Intellisense에 대해 이야기해 보겠습니다. index 를 입력할 때마다 VS Code는 BirthdayList 에서 가져오려고 합니다. 재구성하기 전에 다음과 같은 디렉토리에서 가져왔습니다./components/BirthdayList/BirthdayList. 후자가 더 낫다는 것을 분명히 알 수 있습니다. 다음 코드를 사용하는 것에 대해 생각할 수도 있고 나처럼 나쁜 결과를 얻게 될 것입니다.

export { default } from "./BirthdayList";

이 문제를 어떻게 해결합니까? 내 코드베이스에서 가능한 한 많이 피하려고 합니다./components/BirthdayList. 따라서 다음과 같이 기본적으로 가져온 다음 다시 내보내는 방식으로 수행할 수 있습니다.

import BirthdayList from "./BirthdayList";
export default BirthdayList;

그러나 내가 말했듯이, 나는 어떤 대가를 치르더라도 export default를 피하고 싶습니다.

import BirthdayList from "./BirthdayList";
export { BirthdayList };

이렇게 하면 파일 이름 없이 멋진 자동 완성 및 자동 가져오기를 얻을 수 있습니다.