Frontend 라이브러리에서의 ESM의 export와 export default 사용법에 대한 생각

예전에 했던 생각들

처음에 Frontend 쪽 공부를 시작 했을 때 부터 헷갈렸던건데

export로 컴포넌트를 내보내는게 좋을까?
export default 로 컴포넌트를 내보내는게 좋을까?

물론 두 가지 방법의 문법적인 차이점은 알고 있었다. 하지만 컴포넌트는 사실 두 방법을 모두 써도 상관이 없었기 때문에 더욱 고민이 되었었다.

---

예전에 아래와 같은 컨벤션으로 프로젝트를 진행 해 본적이 있었다.

ㄴ/components
	ㄴ/Button
		ㄴ-Button.tsx
        ㄴ-index.tsx

Button에 대한 컴포넌트 구조가 이렇게 있을 때, Button.tsx 에서는 export로 내보내고 index.tsx에서 export default로 내보낸다.
이렇게 하면 장점은 import 할 때 components/Button/Button로 적지 않고 components/Button 으로만 적으면 된다.

• 장점
  이 방법의 장점은 아까 말 한 대로 Button 폴더명을 두 번 적지 않아도 된다는 것이다.
• 단점
  index.tsx를 쓰기가 귀찮다.
  index.tsx를 통한 import가 강제되는게 아니라서 결국 components/Button/Button으로 import 경로가 쓰일 수도 있다.
  컴포넌트가 많아질 수록 index.tsx도 많아진다.

---

이런 저런 프로젝트를 하면서 대부분 export를 썼었어서 이 문제에 대해서 더 고민하지 않고 점점 export만 쓰게 되었다.

---

최근에 바뀐 생각

그러다가 최근에 다시 이 문제에 직면하게 되었고 이 고민에 대해 조금 해소가 됐다.

내가 생각한 사용법은

export는 이름이 바뀌지 않는 컴포넌트에 사용한다. 예를 들면 Page 컴포넌트, Page 컴포넌트는 (ex-LoginPage, MainPage) 처럼 한번만 import 될 거고 이름을 다르게 쓸 일도 없다.

export default는 이름을 바꿔서 썼을때 이득이 있는 컴포넌트에 사용한다. 주로 재사용이 많은 common 컴포넌트에 사용하면 좋을것 같다. 예를 들면, 위에서 Button 을 예시 코드로 썼는데, Button을 export default 하면 사용할 때는 AddButton, DeleteButton 처럼 이름을 바꿔서 사용해도 된다. 이름을 바꿔서 쓰면 코드에서 해당 Button은 Add와 관련된 Button 이구나가 한 눈에 들어와서 가독성이 좋아질 것이다.

• export 사용시

const Page = ()=>{
  	const {t} = useTranslation();
	return <>
    	//...
      	<Button>{t("Page-Add-Btn-Title")}</Button>
    </>
}

• export default 사용시

const Page = ()=>{
    const {t} = useTranslation();
	return <>
    	//...
      	<AddButton>{t("Page-Add-Btn-Title")}</AddButton>
    </>
}

지금 회사에서는 국제화 적용이 필요해서 tsx의 화면 흐름이 더더욱 눈에 안들어오는 문제가 있다.
개인적으로는 Button이 아닌 AddButton을 사용하니 Button의 용도가 확실히 눈에 더 잘 들어오는 느낌이다.

마치며

이 내용은 지극히 주관적인 내용이다. 내가 생각한 내용들이 맞는건지 실무에서 적용을 해보고 검증하는 단계가 필요할것 같다. 일단 까먹기 싫어서 포스팅으로 정리 해 본것이라서, 나중에 검증을 하게 되면 포스팅을 수정할 지도 모르겠다..ㅎㅎ