함수 선언 vs. 함수 표현식

export default function A {}

export const A: FC = () => {}

이 둘은 JavaScript 및 TypeScript에서 함수를 정의하고 내보내는 두 가지 다른 방법이다. 이 둘은 과연 어떻게 다른 걸까?

 

호이스팅

---

함수 선언 (Function Declaration)

export default function A() { // 함수 본문 }

• 호이스팅: 함수 선언은 호이스팅 되므로, 함수 선언문 이전에 호출할 수 있다.

함수 표현식 (Function Expression)

export const A: FC = () => { // 함수 본문 };

• 호이스팅: 함수 표현식은 변수 호이스팅의 규칙을 따르며, 선언되기 전에 호출할 수 없다.

 

내보내기

---

기본 내보내기 (Default Export)

export default function A() { return <div>Component A</div>; }

• 기본 내보내기: 함수 선언은 주로 기본 내보내기에 사용된다.
• 모듈당 하나의 기본 내보내기: 기본 내보내기는 모듈당 하나만 사용할 수 있다.
• 임포트 시 임의의 이름 사용 가능: 기본 내보내기는 임포트 할 때 임의의 이름을 사용할 수 있다.

 

명명된 내보내기 (Named Export)

export const A: FC = () => { return <div>Component A</div>; };

• 명명된 내보내기: 함수 표현식은 명명된 내보내기에 사용된다.
• 여러 개의 명명된 내보내기: 명명된 내보내기는 모듈당 여러 개를 사용할 수 있다.
• 원래 이름으로 임포트: 명명된 내보내기는 임포트 할 때 원래 이름을 사용해야 한다.

 

 

타입스크립트와 타입 선언

함수 선언과 타입스크립트

export default function A(): JSX.Element { // 함수 본문 }

• 함수 선언에 타입을 추가할 수 있다.
• React 컴포넌트의 경우 반환 타입을 JSX.Element로 명시할 수 있다.

함수 표현식과 타입스크립트

import { FC } from 'react'; export const A: FC = () => { // 함수 본문 };

• FC는 FunctionComponent의 약어로, React에서 함수형 컴포넌트를 타입 선언할 때 사용된다.
• FC 타입을 사용하면 props에 대한 타입 정의도 포함된다.