[React] 컴포넌트 선언 방식 비교 export default vs const

 

1. export default function 방식 (네이밍 함수 선언)

export default function App() { return <h1>Hello, World!</h1>; }

특징:

• function App()은 기명 함수(네이밍 함수) 선언 방식.
• export default를 함수 선언부에서 바로 적용 가능.
• 디버깅 시 오류 메시지에 함수명이 명확하게 표시됨.
• this 키워드 사용이 가능 (클래스 컴포넌트에서는 중요하지만, 함수형 컴포넌트에서는 거의 필요 없음).

 

2. const App = () => {}; export default App 방식 (화살표 함수 선언)

const App = () => { return <h1>Hello, World!</h1>; }; export default App;

특징:

• App은 익명 함수(Anonymous Function)를 변수에 할당하는 방식.
• export default는 별도로 정의.
• 화살표 함수는 this를 바인딩하지 않으므로 클래스 기반 컴포넌트에서는 의미가 있지만, 함수형 컴포넌트에서는 큰 차이가 없음.
• const로 선언되어 변경이 불가능함.

 

3. 차이점 비교

	export default function App()	const App = () => {}; export default App
함수 타입	네이밍된 함수	익명 함수 (변수에 할당)
디버깅	오류 발생 시 함수명이 명확하게 표시됨	익명 함수라 디버깅 시 App이 아니라 로 표시될 가능성이 있음
Hoisting(호이스팅)	가능 (함수 선언 방식이라 최상위로 끌어올려짐)	불가능 (const 변수 선언 후 사용해야 함)
this 바인딩	this를 사용할 수 있음 (클래스 기반에서는 유용)	this를 사용하지 않음 (화살표 함수 특성)

 

4. 어떤 방식이 더 효율적일까?

• 일반적으로 export default function 방식이 더 효율적
  • 함수 선언이 먼저 호이스팅되므로 선언 순서에 영향을 받지 않음.
  • 디버깅할 때 오류 메시지에서 함수 이름이 명확히 표시됨.
  • 문법적으로도 깔끔하고 가독성이 좋음.
• 하지만, 화살표 함수 방식(const App = () => {}) 도 유용할 수 있다.
  • 고차 함수(Higher-Order Function) 사용 시 함수형 변수 할당이 필요할 때.
  • 익명 함수가 필요한 경우, 특정 조건에 따라 컴포넌트를 변경할 때.

결론:
✅ 일반적인 경우: export default function App() 권장
✅ 특정 상황 (함수 할당이 필요한 경우): const App = () => {}; export default App 사용 가능

어떤 방식을 써도 동작에는 차이가 없지만, 유지보수성과 디버깅을 고려하면 export default function 방식이 좀 더 유리하다.