함수 선언식 vs 화살표 함수 컴포넌트
React 컴포넌트는 왜 화살표 함수가 표준이 되었을까?
또, Next.js 시대라고 할 수 있는 요즘 function 선언식이 불편하다고 평가받는 이유도 함께 알아보자.
1. 함수 선언식과 화살표 함수의 기본 차이
✅ 함수 선언식 (Function Declaration)
export default function Skills() {
return <div>...</div>;
}- 호이스팅됨 → 파일 어디서든 호출 가능함
this가 바인딩됨 (React에서는 의미가 거의 없음)- 전통적인 함수 정의 방식
✅ 화살표 함수 (Arrow Function)
const Skills = () => {
return <div>...</div>;
};
export default Skills;- 호이스팅되지 않음
this를 갖지 않음 → React 함수 컴포넌트와 더 자연스럽게 맞음- 컴포넌트를 일급 객체처럼 다루기 쉬움
2. React 컴포넌트는 왜 화살표 함수가 사실상 표준이 되었는가?
1) 일관된 코드 스타일
컴포넌트를 하나의 “값”처럼 관리할 수 있기 때문에 컴포넌트 그룹을 객체/배열로 묶는 React의 패턴과 잘 맞다고 할 수 있다.
const components = {
Hero,
About,
Skills,
};2) 커스텀 훅과의 문법적 통일
React 생태계는 훅 이후 완전히 화살표 함수 중심으로 이동했다고 한다.
const useFetch = () => { ... }
const Skills = () => { ... }같은 패턴으로 작성함으로써 일관된 코드베이스를 가진다.
3) 선언식보다 명시적이다
함수 선언식은 호이스팅되기 때문에 어디 있는지도 모르는 함수가 먼저 실행될 수 있는데, 컴포넌트에서는 전혀 이점이 아니다. 화살표 함수는 명시적으로 직관적 흐름을 강제할 수 있다.
3. Next.js 시대에 function 선언식이 불편해지는 이유
Next.js는 컴포넌트를 파일 단위로 해석한다.
특히 클라이언트 컴포넌트 / 서버 컴포넌트 구분이 생긴 이후로 컴포넌트 선언 방식이 더 중요해졌다.
문제 1) 선언식은 이름이 강제됨
파일명과 컴포넌트 이름은 반드시 일치하지 않아도 되지만, Next.js 구조에서는 대부분 파일명 기반으로 라우팅되기 때문에 화살표 함수 + default export 가 가장 직관적이다.
const Page = () => { ... }
export default Page문제 2) 서버 컴포넌트는 함수로 쓰지 않아도 됨
서버 컴포넌트는 그냥 함수를 반환하는 파일이기 때문에 굳이 function 선언식을 사용할 이유가 없다.
문제 3) 선언식보다 화살표 함수가 선언적이고 짧음
Next.js 파일 구조는 컴포넌트가 많은 경우가 대부분이다. 그렇게 때문에 짧은 문법이 유리하다.
4. 둘 중 무엇을 선택할까?
🔥 결론
React/Next.js에서는 화살표 함수 컴포넌트를 쓰는 것이 더 현대적이고 표준적이다.
이유 요약:
- 일관된 코드 스타일 유지
- 컴포넌트를 값처럼 다루기 쉬움
- 훅과 문법 통일
- 선언 순서가 직관적
- Next.js 구조와 궁합이 더 좋음
마무리
React 생태계는 이미 화살표 함수 중심으로 넘어왔다고 한다. function 선언식도 문제 없이 잘 작동하지만, Next.js를 포함한 최신 프레임워크 흐름과 협업 환경을 고려하면
화살표 함수가 더 효율적이고, 유지보수성이 좋고, 표준적이다.
