JavaScript 빠른 팁: 폴더에서 가져오기

Note: This article was originally written for my personal blog. I am republishing it here for the DEV community.

중대형 프로젝트를 유지 관리하는 것은 고통스러운 일입니다. 여러 파일로 분할하려고 해도 가져오기를 관리하는 것이 보기 흉해지기 시작한다는 것을 깨닫기 시작합니다. 내 파일이 다음과 같이 보이지 않았다면 거짓말일 것입니다.

// Holy imports Batman! 😲
import Grid from './components/Grid';
import Title from './components/Title';
import Text from './components/Text';
import Button from './components/Button';
import Alert from './components/Alert';

이 구성 요소를 모두 같은 폴더에서 가져오기 때문에 이렇게 하는 것이 좋지 않을까요?

// Much better 😌
import { Grid, Title, Text, Button, Alert } from './components';

불행히도 import statement은 폴더 가져오기를 허용하지 않습니다. 그러나 어쨌든 이것을 허용하는 솔루션을 생각해 냈습니다. 돈을 잡고 먼저 방법을 알려주세요.

인덱스 재수출 패턴

이에 대한 적절한 이름이 있는지 확실하지 않으므로 "인덱스 다시 내보내기"패턴이라고 합니다. 이것은 폴더의 모든 파일을 다시 가져오고 내보낼 index.js 파일을 생성하기 때문입니다.
components 폴더의 예를 사용하여 components/index.js 에 파일을 생성해 보겠습니다.

다음으로 export statement의 흔하지 않은 기능을 사용하여 다른 파일에서 내보낼 수 있습니다.

export { default as Grid } from './Grid';
export { default as Title } from './Title';
export { default as Text } from './Text';
export { default as Button } from './Button';
export { default as Alert } from './Alert';

이렇게 하면 components 폴더에서 모든 구성 요소를 가져올 수 있을 뿐만 아니라 본질적으로 UI 구성 요소의 라이브러리를 생성합니다.

특히 모든 내보내기가 기본 내보내기가 아닌 경우 가져올 수 있는 항목을 정확히 볼 수 있다는 점에서 큰 이점이 있습니다. 예를 들어, components/Button.js 내부에 기본 내보내기와 명명된 내보내기가 모두 있다고 가정해 보겠습니다.

export default Button; // default export of Button component
export BigButton; // named export of a Button variant

이제 components/index.js 내부에 BigButton 를 추가할 수 있습니다.

export { default as Button, BigButton } from './Button';

그것만큼 간단합니다.

큰 힘에는 큰 책임이 따른다

프로젝트를 과도하게 구성하는 일이 있으므로 모든 단일 폴더에 대해 이 패턴을 사용하기로 결정하기 전에 주의를 기울이겠습니다. 여러 구성 요소를 가져올 때 편리하지만 유틸리티/헬퍼 함수와 같은 작은 항목을 가져올 때는 성가실 수 있습니다. 코딩하는 동안 문제가 너무 높아서 도달할 수 있다는 것을 알게 될 것이지만, 그렇지 않으면 조기에 하지 않을 것입니다.