default export vs named export

[heecheon92]

지금 작업중인 프로젝트에서 명확하지 않은 export convention 때문에 고민입니다.

저 혼자 작업하는게 아니므로 특정 lint룰을 집어 넣기도 애매해요.

다음 프로젝트를 시작할때쯤엔 no-default-export를 고려중인데요 (정말 필요한 곳에서만 허용하는 방식으로)

여러분들은 어떤 export 방식을 선호하시나요?

각각의 export 방식에 어떤 장단점이 있을까요?

// useFoo.ts
export default function useFoo() { return "foo" }
// Other.tsx
import foo from "useFoo"
...


// useBar.ts
export function useBar() { return "bar" }
// Another.tsx
import { useBar } from "useBar"
...

[Ring-wdr]

default export 하면 함수명이 변경되는 경우에 커버되지 않는 경우가 발생해서 default를 쓰지 않는 쪽이 명시적이라고 생각합니다. 그래서 프레임워크에서 강제하지 않는한 최대한 default export를 자제하고 있어요

[sunujun]

저는 Named Export를 사용하여 모든 import가 균일한 패턴을 따르도록 하고 있어요(eslint rule).
Named Export는 import 문이 선언되지 않은 것을 가져오려고 할 때 오류를 발생시키는 이점이 있다고 생각해요.

예외의 경우(예: Next.js page)가 있다면 규칙을 비활성화하기도 해요.

// .eslintrc.js
overrides: [
  {
    files: ["src/pages/**/*"],
    rules: { "import/no-default-export": "off" },
  },
],

[heecheon92]

앗 의견 감사합니다.

저도 신규 프로젝트 따면서 아래와 같이 필요한 곳만 예외처리 하니

소스 통일성을 강제하게 되어서 기쁩니다 ㅎㅎ

  {
    files: [
      "*.config.{js,mjs,cjs,ts,mts,jsx,tsx}",

      /* Exclude NextJS special files */
      "**/page.{jsx,tsx}",
      "**/layout.{jsx,tsx}",
      "**/loading.{jsx,tsx}",
      "**/template.{jsx,tsx}",
      "**/default.{jsx,tsx}",
    ],
    rules: {
      "import/no-default-export": "off",
    },
  },

[arusantimo]

default export모듈 내보내기 하게 되면 무조건적이진 않지만 번들러에서 잠재적으로 트리쉐이킹에 문제가 될 수 있기 떄문에 프로젝트 환경 구성상에서도 named export를 권장하는것이 좋다고 생각합니다.

[ho1234c]

저는 export, import는 파일간의 통신 규약이라고 생각해서 named export를 선호합니다.

가끔 어떤 scope내에서 사용하는 변수의 이름과 외부에 내보낼 변수의 이름을 다르게 정하고 싶은 경우가 있습니다. 컨텍스트가 달라지면 그 의미 또한 달라질 수 있기 때문이에요. 그와 마찬가지로 export할 모듈의 이름을 지정하는것 또한 만든 사람의 의도를 드러내는 수단 중 하나라고 생각해요