React에서 export default function vs export function 차이점

React를 공부하며 만난 export의 두 가지 형태

안녕하세요, React를 공부하면서 export default function Button()과 export function Button()의 차이에 대해 헷갈렸던 적이 있었어요. 처음엔 "똑같이 export인데 뭐가 다를까?" 싶었는데, 실제로 사용해보면서 중요한 차이를 발견했습니다. 오늘은 이 차이를 정리해보려고 해요! 😊

1️⃣ export default function Button()

// Button.js
export default function Button() {
  return <button>Click Me</button>;
}

사용 방법:

// App.js
import Button from './Button';

function App() {
  return <Button />;
}
export default App;

특징 

✔️ 파일에서 한 개의 기본 내보내기(default export)만 가능해요.
✔️ import할 때 중괄호 {} 없이 원하는 이름으로 가져올 수 있어요.
✔️ 파일명과 달라도 import Btn from './Button';처럼 이름을 바꿀 수 있어요.

---

2️⃣ export function Button()

// Button.js
export function Button() {
  return <button>Click Me</button>;
}

사용 방법:

// App.js
import { Button } from './Button';

function App() {
  return <Button />;
}
export default App;

특징 

✔️ 같은 파일에서 여러 개의 함수(컴포넌트)를 export할 수 있어요.
✔️ import할 때 중괄호 {}를 꼭 써야 해요.
✔️ import할 때 이름을 바꿀 수 없어요. (예: import { Btn } from './Button'; ❌ 오류 발생)

---

핵심 차이점 정리

정리

	export default	export
내보낼 수 있는 개수	파일당 1개	여러 개 가능
import할 때	{} 없이 사용	{} 필수
이름 변경 가능 여부	가능	불가능

---

언제 어떤 걸 사용하면 좋을까?

컴포넌트가 하나만 있는 경우 → export default를 주로 사용해요. (ex. Button, Navbar 같은 독립적인 컴포넌트)
여러 개의 유틸 함수나 컴포넌트를 포함하는 경우 → export를 사용해요. (ex. export function add(), export function subtract())

---

마무리

React에서 export default와 export는 비슷해 보이지만, 실제로 사용해보면 확실한 차이가 있어요.
공부하면서 두 가지 방법을 적절하게 사용하는 것이 중요하다는 걸 느꼈어요!!~!!

혹시 궁금한 점이 있으면 댓글로 남겨주세요! ㅎㅎ  🙌