Default Export & Named Export

---

React와 TypeScript 프로젝트에서 export하는 방법 Default Export와 Named Export
이 두 가지 방법의 차이와 사용 사례를 정리했습니다.

---

Default Export

• 파일에서 하나의 기본(default) 값만 내보냅니다.
• 가져올 때 이름을 자유롭게 지정할 수 있습니다.

코드 예제

• SignUp.tsx

  const SignUp = () => {
     return <SignUpStyle></SignUpStyle>;
  };
  
  export default SignUp;

• 다른 파일에서 가져다 사용할 때

  import SignUpComponent from './SignUp';

  • 이름을 자유롭게 지정 가능

---

Named Export

• 파일에서 여러 이름으로 값을 내보낼 수 있습니다.
• 가져올 때는 반드시 정확한 이름을 사용해야 합니다.

코드 예제

• SignUp.tsx

  export const SignUp = () => { 
     return <SignUpStyle></SignUpStyle>;
  };

• 다른 파일에서 가져다 사용할 때

  import { SignUp } from './SignUp';

  • 내보낸 명칭을 그대로 사용해야 함

---

어떤 방식을 사용할까?

• Default Export는 파일에서 하나의 주요 컴포넌트나 값을 내보낼 때 적합합니다.
  • 예) SignUp.tsx와 같은 특정 컴포넌트를 단독으로 내보낼 때

• Named Export는 하나의 파일에서 여러 컴포넌트나 유틸리티 함수를 제공할 때 적합합니다.
  • 예) auth.tsx 파일에서 SignUp, SignIn 컴포넌트를 함께 내보낼 때

---

차이점 비교

항목	Default Export	Named Export
내보내는 방식	하나의 기본 값	여러 이름으로 내보내기 가능
가져오는 방식	이름을 자유롭게 지정 가능	내보낸 이름 그대로 가져와야 함
사용 용도	파일당 하나의 메인 값	모듈에서 여러 유틸리티/컴포넌트 제공
협업 시 일관성	낮음	높음

• Default Export는 주로 단일 컴포넌트를 내보낼 때 유리하며,
• Named Export는 여러 값이나 컴포넌트를 내보낼 때 적합합니다.