React에서 function Page() : 함수 선언식(function declaration) vs const Page()=>{} 함수 표현식(function expresssion) 차이점

 

React나 Next.js 프로젝트를 하다 보면 아래의 두가지 형태의 컴포넌트 선언 방식을 자주 마주하게 된다.

// 방식 1 - 함수 선언식
export default function Page() {
  return <ProjectAdd />;
}

// 방식 2 - 함수 표현식
const Page = () => {
  return <ProjectAdd />;
};
export default Page;

 

겉보기엔 똑같이 작성하지만, 자바스크립트 문법적으로는 엄연히 차이가 존재한다. 

이 두방식의 차이점과 실제 어떤 상황에서 어떤 걸 쓰는게 좋은지 정리해보려고 한다.

 

 

 

---

1. 함수 선언식(function Page())

export default function Page() {
  return <ProjectAdd />;
}

특징

• 호이스팅(hoisting)이 적용된다.
• 함수 선언이 코드 상단으로 끌어올려져서 선언 이전에 호출 가능
• 디버깅 시 함수 이름이 명확하게 나오기 때문에 stack trace에서 가독성이 좋음.
• Next.js 공식 예제나 문서에서 자주 등장한다.

예시

sayHello(); // 정상 작동

function sayHello() {
  console.log("Hello!");
}

 

 

---

2. 함수 표현식(const Page = () => {})

const Page = () => {
  return <ProjectAdd />;
};
export default Page;

 

특징

• 호이스팅되지 않 (정의 이전에 호출 시 오류 발생)
• Arrow Function이라서 this 바인딩이 고정됨.
• Hook과 함께 쓰기 편하고, 가독성도 높아 실무에서 가장 많이 사용되는 방식
• 변수를 통해 함수를 정의하므로 const, let, var 키워드 중 하나를 반드시 사용해야 

예시

sayHello(); // ❌ 오류 발생

const sayHello = () => {
  console.log("Hello!");
};

 

 

 

3. ✅ 비교 정리

항목	함수 선언식	함수 표현식
선언 방식	function Page()	const Page = () => {}
호이스팅	O (선언 전에 사용 가능)	X (정의 이후에만 사용 가능)
this 바인딩	동적 (function이 호출된 방식에 따라 결정)	렉시컬 (화살표 함수의 상위 스코프 고정)
React에서 사용	비교적 드물게 사용	✅ 가장 많이 사용됨
Next.js 예제	자주 사용됨	점점 더 많이 사용 중

 

 

 

4. 실무에서 뭘 써야 할까?

팀 컨벤션이 있다면 그 스타일을 따르는게 우선이다.

일반적으로는 const Component = () => {} 방식이 더 많이 사용된다.

 

Arrow Function은 간결하고 hook 사용 시도 깔끔해서, 유지보수에도 유리하다.

단, Next.js의 page.tsx 같은 경우엔 function Page() 형태로 많이 사용되니 문맥에 맞게 유연하게 쓰는 게 좋다.