리액트에서 화살표 함수가 자주 쓰이는 이유는?

 

리액트에서는 화살표 함수와 일반 함수를 모두 사용할 수있지만, 화살표 함수가 자주 사용되는 이유는

React의 특성과 관련이 있다.

 

1. this의 컨텍스트 문제 해결

• 화살표 함수는 상위 스코프의 this를 그대로 사용하기 때문에 클래스 컨포넌트에서 콜백 함수로 사용할 때 유용하다.
• 예를 들어, 일반 함수는 this가 변경될 수 있으므로 추가 적인 .bind(this) 작업이 필요하다

class MyComponent extends React.Component {
  constructor() {
    super();
    this.handleClick = this.handleClick.bind(this); // 꼭 필요함
  }

  handleClick() {
    console.log(this); // 'this'가 undefined일 수 있음
  }

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

 

반면 화살표 함수를 사용하면 this를 명시적으로 바인딩 할 필요가 없다.

class MyComponent extends React.Component {
  handleClick = () => {
    console.log(this); // 'this'가 항상 올바르게 설정됨
  };

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

 

 

2. 함수형 컴포넌트와 화살표 함수의 궁함

함수형 컴포넌트에서는 this가 필요 없기 때문에, 간결하게 작성할 수 있는 화살표 함수가 선호된다.

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

 

 

4. 간결하고 직관적인 문법

특히 짧은 콜백 함수 작성 시 화살표 함수는 코드의 가독성을 높여준다.

// 화살표 함수
const items = list.map((item) => item.name);

// 일반 함수
const items = list.map(function (item) {
  return item.name;
});

 

 

 

일반 함수가 적합한 경우

React에서는 상황에 따라 일반함수를 사용하는 것이 더 적합한 경우도 있다.

 

1. 상황에 따라 this를 바꿔야 할 경우

화살표 함수는 this를 고정시키기 때문에 this를 동적으로 변경해야 하는 경우 일반 함수가 적합하다.

 

2. 더 명확한 가독성을 위해

복잡한 로직을 가진 함수는 일반 함수로 작성하면 더 읽기 쉬울 때가 있다.

function handleComplexLogic(param) {
  if (param > 0) {
    return "Positive";
  }
  return "Negative";
}

 

3. 객체 메서드 정의 시

클래스 메서드를 정의할 때, 일반 함수는 표준적인 방식이다.

class MyComponent extends React.Component {
  myMethod() {
    console.log("This is a method.");
  }
}

 

 

화살표 함수 vs 일반 함수

화살표 함수	일반 함수
간결하고 짧은 함수 정의에 적함	복잡한 로직이나 명확한 코드 가독성 필요 시 적합
this가 상위 스코프를 따름	this가 호출방식에 따라 달라짐
함수형 컴포넌트에서 더 자주 사용됨	클래스 컴포넌트의 메서드 정의에서 주로 사용됨
추가적인 .bind(this)가 필요하지 않음	바인딩이 필요할 수 있음