기본 내보내기를 사용하면 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에서 확인하세요.