React에서 람다 함수를 선호하는 4가지 이유 (화살표 함수 활용법)

React에서 람다 함수(화살표 함수)를 선호하는 주요 이유를 정리하겠습니다:

1. 간결한 문법

람다 함수는 전통적인 함수 선언보다 더 간결한 문법을 제공합니다.

// 전통적인 함수 선언
function traditionalFunction(param) {
  return param + 1;
}

// 람다 함수
const lambdaFunction = (param) => param + 1;

특히 단일 표현식을 반환하는 경우, 중괄호와 return 키워드를 생략할 수 있어 코드가 더 간결해집니다.

2. Lexical this (this 바인딩 문제 해결)

람다 함수의 가장 중요한 특징 중 하나는 "lexical this"입니다. 람다 함수는 자신만의 this 바인딩을 생성하지 않고, 대신 자신을 포함하고 있는 외부 스코프에서 this를 상속받습니다.

예를 들어, 다음과 같은 React 클래스 컴포넌트가 있다고 가정해봅시다:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log(this.props.name);
  }

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

여기서 handleClick 메서드는 일반 함수로 정의되었기 때문에 자신만의 this 바인딩을 갖습니다. 따라서 생성자에서 명시적으로 this를 바인딩해주어야 합니다. (this.handleClick = this.handleClick.bind(this);)

하지만 람다 함수를 사용하면 이 과정이 필요없어집니다:

class MyComponent extends React.Component {
  handleClick = () => {
    console.log(this.props.name);
  };

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

여기서 handleClick은 화살표 함수로 정의되었기 때문에 자신만의 this 바인딩을 생성하지 않고, 대신 MyComponent 클래스의 this 컨텍스트를 상속받습니다. 따라서 별도의 바인딩 과정 없이도 this.props에 접근할 수 있게 됩니다.

이처럼 람다 함수를 사용하면 React 컴포넌트 내부에서 콜백 함수를 정의할 때 this 바인딩 문제를 간단하게 해결할 수 있습니다.

3. 콜백 함수에 적합

React에서 이벤트 핸들러나 콜백 함수를 정의할 때 람다 함수가 매우 유용합니다.

function Component() {
  return (
    <button onClick={() => console.log('Clicked!')}>
      Click me
    </button>
  );
}

JSX 내에서 인라인으로 정의할 때 특히 간결하고 읽기 쉬운 코드를 작성할 수 있습니다.

4. 암시적 반환

단일 표현식을 반환하는 경우, 람다 함수를 사용하면 return 키워드 없이 암시적 반환이 가능합니다.

// 명시적 반환
const explicitReturn = (a, b) => {
  return a + b;
};

// 암시적 반환
const implicitReturn = (a, b) => a + b;

이러한 특징들로 인해 React 개발에서 람다 함수는 코드를 더 간결하고 읽기 쉽게 만들며, 특히 this 바인딩 문제를 효과적으로 해결할 수 있습니다. 그러나 성능과 사용 맥락을 고려하여 적절히 사용해야 합니다.