화살표 함수 컴포넌트, 함수 선언문 컴포넌트 형태와 사용 차이

 

✅ ① 화살표 함수 컴포넌트 ( React 컴포넌트 ⭕, 커스텀 훅 ⭕, 일반 유틸 함수 ⭕)

const Test = () => {
  return <div>Test</div>;
};

장점

• 일관된 스코프(lexical this) → class 기반 this 문제 없음
• 재정의 방지 가능 (const라 재할당 불가)
• 컴포넌트, 훅 작성 시 가장 많이 쓰는 패턴
• 타입스크립트에서 Props 타입 지정이 쉽다

단점

• 호이스팅 안 됨 → 선언 위에서 사용 불가

🤔 ❓호이스팅(Hoisting)이란?
=> JS에서 함수 선언문(function 선언)이나 var 변수 선언을 코드 위로 끌어올려서 해석하는 특징
즉, 선언하기 전에 호출해도 동작할 수 있음이라는 뜻

function test() {
  console.log('Hello');
}

test(); // ✅ 가능


simple(); // ✅ 가능
function simple() {
  console.log('Hello');
}

=> JS 엔진이 위 코드를 실행하기 전에 함수형 컴포넌트 선언을 위로 끌어올려서 먼저 준비하기 때

 

 

 

✅ ② 함수 선언문 컴포넌트 ( 일반 유틸 함수 ⭕)

function Test() {
  return <div>Test</div>;
}

 

장점

• 호이스팅됨 → 선언 전에 호출 가능
• 문법적으로 깔끔하게 보임
• JS 기본 함수 형태라 직관적

단점

• this 사용 시 혼란(React 함수 컴포넌트에서는 거의 문제 없지만)
• 같은 이름의 function을 덮어쓸 수 있어 유지보수에 좋지 않음
• 타입스크립트에서 props 타입 선언이 길어짐

 

컴포넌트와 함수 선언 순서, 실행 순서_코드리뷰