React 함수 선언 방법 2가지

1. 전통적인 함수 선언

형식

function 함수이름(파라미터) {
  // 코드
}

 

2. 화살표 함수 (Arrow Function)

형식

const 함수이름 = (파라미터) => {
  // 코드
};

 

3. 전통적인 함수와 화살표 함수의 차이

구분전통적인 함수화살표 함수

 

 

 

4. 주요 차이점 자세히 설명

1) this의 차이

• 전통적인 함수는 호출된 시점에서 **this**가 동적으로 결정됩니다.
• 화살표 함수는 상위 스코프의 this를 그대로 사용합니다.

전통적인 함수와 this

const obj = {
  name: "React",
  showName: function () {
    console.log(this.name);
  },
};

obj.showName(); // 출력: React

 

화살표 함수와 this

const obj = {
  name: "React",
  showName: () => {
    console.log(this.name);
  },
};

obj.showName(); // 출력: undefined

화살표 함수의 this는 상위 스코프를 참조하기 때문에 this.name이 존재하지 않습니다.

 

 

2) 함수 호이스팅 (Hoisting)

전통적인 함수는 호이스팅이 됩니다.

greet(); // 정상 실행: "Hello, World!"

function greet() {
  console.log("Hello, World!");
}

 

화살표 함수는 호이스팅되지만, 선언 전에 사용하면 에러가 발생합니다.

greet(); // ReferenceError: Cannot access 'greet' before initialization

const greet = () => {
  console.log("Hello, World!");
};