[React] 함수 선언문 vs 화살표 함수(Arrow Function)

• 함수 선언문 vs 화살표 함수
  • 함수 선언문 (Function Declaration)
  • 화살표 함수 (Arrow Function)
  • 주요 차이점
  • 리액트에서의 사용 예시

---

자바스크립트, React에서 함수 선언문과 화살표 함수는 함수를 정의하는 두 가지 주요 방식이다.

 

둘은 기본적인 문법 차이부터, this 바인딩 방식, 호이스팅 처리까지 여러 면에서 차이를 보인다.

 

특히, React와 같은 모던 웹 개발에서 두 방식은 각기 다른 상황에서 유용하게 사용된다.

 

이번 포스팅에서는 함수 선언문과 화살표 함수의 특징을 비교하고,

각각의 장단점과 실용적인 실용적인 사용 사례를 살펴보고자 한다.

 

또한, React에서 두 방식의 차이가 어떻게 컴포넌트 개발에 영향을 미치는지에 대해서도 다루어,

개발자들이 보다 효율적으로 함수를 선택하고 활용할 수 있도록 도와줄 것이다.

---

- 함수 선언문 vs 화살표 함수

 

리액트에서 함수 선언문(function declaration)과 화살표 함수(arrow function)의 차이는

 

주로 this 바인딩과 문법에서 나타난다.

 

각 방식의 특징을 비교해 보도록 하겠다.

---

- 함수 선언문 (Function Declaration)

function MyComponent() {
    return <div>Hello, World!</div>;
}

 

• 문법
  • function 키워드를 사용하여 함수를 선언한다.
• this 바인딩
  • 함수 선언문은 호출될 때 this가 동적으로 바인딩된다.
  • 즉, this는 함수가 호출될 때의 컨텍스트(객체)에 따라 다르게 설정된다.
• 호이스팅(hoisting)
  • 함수 선언문은 호이스팅된다.
  • 즉, 함수 선언이 코드의 어디에 있든 상관없이 호출할 수 있다..

 

 

- 화살표 함수 (Arrow Function)

const MyComponent = () => {
    return <div>Hello, World!</div>;
}

 

 

• 문법
  •  () => {} 형태로 간단하게 작성합니다. 화살표 함수는 주로 익명 함수로 사용된다.
• this 바인딩
  • 화살표 함수는 this를 정적으로 바인딩한다..
  • 즉, 화살표 함수 내에서의 this는 해당 함수가 선언된 컨텍스트의 this 값을 그대로 사용한다..
  • this가 예상치 못한 값으로 바뀌지 않기 때문에, 주로 리액트 컴포넌트 내에서 이벤트 핸들러로 자주 사용된다.
• 호이스팅
  • 화살표 함수는 변수에 할당된 함수로 취급되므로 호이스팅되지 않는다.
  • 즉, 정의된 이후에 호출할 수 있다.

 

- 주요 차이점

문법	function MyComponent() {...}	const MyComponent = () => {...}
this 바인딩	동적: 호출 시점에 결정	정적: 함수 정의 시점에 결정
호이스팅	호이스팅되므로, 코드 상단에서 호출 가능	호이스팅되지 않음; 함수 정의 후 호출 가능
용도	일반적인 함수 및 메서드 정의	주로 콜백 함수, 이벤트 핸들러 등에서 사용

---

- 리액트에서의 사용 예시

 

1. 함수 선언문 (Function Declaration)

클래스형 컴포넌트에서 메서드를 정의할 때 주로 사용된다.

class MyComponent extends React.Component {
    handleClick() {
        console.log('Clicked');
    }

    render() {
        return <button onClick={this.handleClick}>Click me</button>;
    }
}

 

2. 화살표 함수 (Arrow Function)

함수형 컴포넌트 및 이벤트 핸들러에서 사용된다.

 

this가 예상대로 바인딩되기 때문에

클래스형 컴포넌트에서 메서드를 화살표 함수로 정의할 때 유용하다.

class MyComponent extends React.Component {
    handleClick = () => {
        console.log('Clicked');
    };

    render() {
        return <button onClick={this.handleClick}>Click me</button>;
    }
}

 

3. 결론

 

함수 선언문은 클래스한 함수 정의 방식으로,

this가 동적으로 바인딩되어 this의 변화가 중요한 경우 적합하다.

 

화살표 함수는 this 바인딩에 유리하여, 리액트 컴포넌트 내에서 자주 사용된다.