TS, React 환경의 export 컨벤션 제안

1. export 컨벤션이 중요한 이유: 일관성 2. 제안: Named export으로 통일하기 3. 근거 3-1. 스코프 정보의 응집성 3-2. Named export는 타입을 포함한 모든 값 앞에 쓸 수 있어요.3-2-1. Arrow function은 선언부에 export default를 쓸 수 없어요.

1. export 컨벤션이 중요한 이유: 일관성

Export 방법이 일관되지 않으면 이해하기 어려운 import 구문을 만나게 돼요.

Export 방식도 매번 다르면 어느 변수를 내보내는지 오해할 수 있어요.

이렇게 높은 빈도로 사용되는 일관되지 않았을 때 발생하는 혼란이 커요.

예시)


// export 측
export const useA = (...) => {};

export default function useB = (...) => {};

const useC = (...) => {};
export default useC;

// import 측
import { useA } from "@/hooks/useA";
import useB from "@/hooks/useB";
import useC from "@/hooks/useC";
import { type SomeProp } from "@/hooks/useD";
import { type SomeType } from "@/components/common/someCode";
import { someUtilFunction } from "@/lib/editorContent";

2. 제안: Named export으로 통일하기

Named export만이 export 구문의 위치를 일정하게 가져갈 수 있어요.

항상 선언부에 표시하기 때문에 public 여부도 쉽게 확인할 수 있고요.


export interface ComponentAProps {
	/* ... */
}

export const ComponentA = () => {
	/* ... */
}

export const useA = () => {
  /* ... */
}

export const utilityA = () => {
  /* ... */
}

import { ComponentA, ComponentAProps, useA } from '@/components/A';
import { useA } from '@/hooks/A';
import { utilityA } from '@/utility/A';

3. 근거

3-1. 스코프 정보의 응집성

export 구문을 변수 앞에 두는 게 스코프 정보의 응집성이 가장 높아요.

export 구문이 파일 끝에 있는 것보다 응집성이 높아요.

export 정보를 변수 옆에 두면 해당 변수의 public 여부를 즉시 확인할 수 있어요.
파일 끝에 두거나, 변수 선언부와 멀리 두면 public 여부를 직접 찾아봐야 알 수 있어요.

ㅤ	default function	named arrow	default arrow
export 구문의 응집성	O	O	△

아래 코드는 export를 변수 앞에 둘 수 없어서 스코프 정보의 응집성이 조금 떨어져요.


const ComponentA = (...) => {};
/* ... */
export default ComponentA;

3-2. Named export는 타입을 포함한 모든 값 앞에 쓸 수 있어요.

default export는 type, interface, var, let, const에 쓸 수 없어요.

type, interface는 변수 앞이 아니면 export 구문을 쓸 수 없어요.

ㅤ	named export	default export	승자
import 구문의 간결함	`{, }` 필요	`import Name from './module';`	default
export 구문의 범용성	모든 식별자에 사용 가능 (type, interface 포함)	Function, Class만 가능	named

3-2-1. Arrow function은 선언부에 export default를 쓸 수 없어요.

Function의 생성자 기능이 필요한 게 아니라면 대부분 Arrow function을 쓰는 게 더 좋아요.

특히 아래의 요소들을 대부분 단순한 함수로 구성하기 때문에 Arrow function을 쓸 일이 많아요.

React Component

React Hook

Utility Function

Fetch Function (axios, fetch를 래핑한 함수들)