기본 내보내기를 사용하면 JavaScript를 읽기가 더 어려워집니다!

이 블로그 게시물에서는 JavaScriptexport default를 사용하면 코드베이스 가독성과 리팩토링 가능성이 어떻게 저하되는지 보여드리고자 합니다. 명명된 내보내기 사용에 대한 몇 가지 팁도 공유하겠습니다!

나는 내 코드를 점토처럼 취급하는 것을 좋아합니다. 새로운 기능을 추가하거나 기존 기능을 변경할 때 지속적으로 발전하고 있습니다. 그러나 기본 내보내기를 사용하면 더 어려워질 뿐만 아니라 이미 존재하는 코드를 사용할 때 복잡성이 추가됩니다!

내 추론을 설명하자!

익명 함수 및 값을 내보낼 수 있습니다.

기본 내보내기의 첫 번째 주요 문제는 이름 지정입니다. 이름 가져오기를 포함할 때마다 이름 가져오기에 대해 생각해야 합니다. 뿐만 아니라 익명 값을 내보낼 수 있으므로 새 함수를 생성할 때 좋은 이름을 지어야 하는 것은 아닙니다.

이 간단한 JavaScript 파일을 살펴보겠습니다.

// cookies.js
export default () => {
  // baking 🍪 cookies logic
};

// app.js
import makeChocolateChipCookies from "./cookie.js";

cookies.js에서 기본 내보낸 함수가 무엇을 하는지 알 수 없습니다. 물론 구현을 엿보거나 문서에 의존할 수 있지만 확실히 더 많이 추가됩니다cognitive load. 그 기능이 무엇을 해야 하는지 정확히 알 수 없습니다.

따라서 사용하려는 모든 위치에서 해당 기능의 이름을 지정하는 것에 대해 생각해야 합니다. 그리고 이름을 짓는 것은 어렵습니다. 아마도 당신이 그 함수를 직접 작성했을 것입니다. 당신은 그것이 하는 일을 정확히 알고 있습니다. 그러나 새로운 팀원이 합류하면 이 기능이 무엇을 하는지 이해하기가 훨씬 더 어렵습니다.

이는 또한 다른 팀 구성원이 새로운 기능을 작업하거나 기존 코드를 리팩토링할 때 다른 이름을 선택하게 할 수 있습니다. 그리고 일관성과 규칙은 높은 성과를 내는 팀의 핵심입니다! 코드 검토에서 다른 이름을 제안할 수 있지만 명명된 내보내기를 사용하면 처음에 쉽게 피할 수 있는 복잡성이 추가됩니다.

모듈에서 모두 가져올 때 어색합니다.

JavaScript의 가져오기를 사용하면 import * as X 구문을 사용하여 모듈에서 모든 것을 가져올 수 있습니다. 그리고 기본 내보내기는 default 에서 사용할 수 있습니다.

// app.js
import * as Cookies from "./cookie.js";

// usage - yikes
Cookies.default();

물론 한 가지를 내보내는 경우 사용하지 않을 가능성이 높기 때문에 중요하지 않습니다import * as X. 그러나 가독성을 위해 모듈 이름으로 가져오는 여러 항목을 그룹화할 수 있습니다.

모듈 기능을 그룹화하는 것을 정말 좋아하지만
가독성을 위한 훌륭한 연습이지만 항상 트리에 최적인 것은 아닙니다.
흔들리고 번들 크기가 커질 수 있습니다!

기본 내보내기 및 폴더 기반 라우팅

Next.js 또는 Remix와 같은 프레임워크는 기본 내보내기를 사용하여 폴더 기반 라우팅으로 구성 요소를 정의하도록 합니다. 나는 어떤 경우에도 기본 내보내기를 강제하는 것을 좋아하지 않습니다.

TypeScript는 이 시점에서 "템플릿"스타일 내보내기에 대한 지원이 부족합니다. 여기서 단일 파일은 기본 기본 내보내기 외에 미리 정의된 선택적 명명된 내보내기 세트를 내보낼 수 있습니다. 이전에 언급한 프레임워크의 인기를 기반으로 향후 언어에 이와 같은 것이 포함되는 것을 보고 싶습니다.

명명된 내보내기 사용

각 기능을 개별적으로 내보내거나 한 번에 모든 것을 내보내시겠습니까?

구문을 사용하면 각 함수, 유형 또는 값 앞에 export 키워드를 사용할 수 있습니다.

export function makeCookies() {
  // baking 🍪 cookies logic
}

동시에 여러 항목을 내보낼 수도 있습니다.

function makeCookies() {
  // baking 🍪 cookies logic
}

function eatCookies() {
  // eating 🍪 cookies logic
}

export { makeCookies, eatCookies };

읽고 있는 함수가 내보내졌는지 여부를 명확하게 알 수 있으므로 첫 번째 접근 방식을 선호하는 경향이 있습니다.

구조에 명명된 내보내기 별칭

다른 이름을 사용해야 하는 경우 명명된 내보내기는 명명된 내보내기 별칭을 허용합니다.

// cookies.js
export function makeCookies() {
  // baking 🍪 cookies logic
}

// app.js
import { makeCookies as makeCookiesWithStyle } from "./cookie.js";

결론

우리는 이미 ES2015(ES6)를 가지고 있지만 모든 유형의 응용 프로그램에서 많은 기본 내보내기를 볼 수 있습니다. CommonJS 상호 운용성을 위해 도입되었으며 내부 코드에서 사용할 이유가 별로 없습니다. 이 게시물이 가능한 경우 기본 내보내기를 사용하지 않도록 팀을 설득하는 데 도움이 되기를 바랍니다.

공포 이야기를 리팩토링하는 기본 내보내기가 있는 경우 주저하지 마십시오!

자원

이 블로그 게시물을 조사할 때 사용한 리소스 목록:

https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export

https://blog.neufund.org/why-we-have-banned-default-exports-and-you-should-do-the-same-d51fdc2cf2ad

cichocinski.dev에서 더 읽어보기