[React] 리액트에서 타입스크립트 데코레이터의 사용

최근에 타입스크립트를 공부하면서 데코레이터에 대해 배웠는데, 요즘 리액트에서 데코레이터를 사용하는 것을 거의 못본 것 같아 리액트에서 어떻게 사용되었는지 알아보았다.

알아보니 리액트가 함수형 컴포넌트 방식으로 전환되면서 데코레이터는 거의 사용하지 않게 되었다고 한다.

---

최신 웹 개발 트렌드는 리액트에서 함수형 컴포넌트의 사용을 적극 권장하고 있다. 이에 따라, 과거 클래스 컴포넌트에서 널리 사용되던 데코레이터의 사용 빈도가 점점 감소하고 있다. 함수형 컴포넌트는 훅(Hook)을 통해 상태 관리, 사이드 이펙트 처리 등을 할 수 있으므로, 데코레이터를 사용할 필요성이 크게 줄어들었다.

함수형 컴포넌트와 훅의 부상

함수형 컴포넌트는 클래스 기반의 컴포넌트보다 간결하고, 훅을 사용하여 다양한 리액트 기능을 손쉽게 통합할 수 있다. 특히 리액트 16.8의 훅 도입으로 함수형 컴포넌트에서도 상태 관리, 생명주기 메서드, 컨텍스트 사용이 가능해졌다.

클래스 컴포넌트의 데코레이터 한계

클래스 컴포넌트에서 this 바인딩은 오랜 기간 개발자들에게 혼란과 불편함을 야기했다. 예를 들어, 리액트 컴포넌트의 메서드를 이벤트 핸들러로 사용할 때 this가 예상대로 바인딩되지 않으면, 상태나 props에 접근할 수 없는 문제가 발생한다.

class App extends React.Component {
  state = {
    message: 'Hello!'
  };

  // 이 메서드는 기본적으로 인스턴스에 바인딩되지 않는다.
  showMessage() {
    alert(this.state.message);
  }

  render() {
    // showMessage가 호출될 때 this는 undefined를 가리키게 된다.
    return <button onClick={this.showMessage}>Show Message</button>;
  }
}

이 문제를 해결하기 위해 AutoBind와 같은 데코레이터가 등장했다. AutoBind는 메서드에 적용되어 자동으로 this를 인스턴스에 바인딩해 준다.

// AutoBind 데코레이터 정의
function AutoBind(_: any, _2: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  const adjDescriptor: PropertyDescriptor = {
    configurable: true,
    get() {
      return originalMethod.bind(this);
    }
  };
  return adjDescriptor;
}

class App extends React.Component {
  state = {
    message: 'Hello!'
  };

  @AutoBind
  showMessage() {
    alert(this.state.message);
  }

  render() {
    // showMessage가 호출될 때 this는 항상 App 인스턴스를 가리킨다.
    return <button onClick={this.showMessage}>Show Message</button>;
  }
}

그러나 함수형 컴포넌트와 훅의 등장으로, 이러한 복잡성을 해결할 새로운 패턴이 나타났다. 예를 들어, useState와 useCallback 훅을 사용하여 클래스 컴포넌트의 상태 관리와 이벤트 핸들러를 다음과 같이 간단히 표현할 수 있다.

const App = () => {
  const [message, setMessage] = useState('Hello!');

  // useCallback 훅을 사용하여 showMessage 함수를 메모이제이션한다.
  const showMessage = useCallback(() => {
    alert(message);
  }, [message]);

  return <button onClick={showMessage}>Show Message</button>;
};

이처럼 현대 리액트 개발에서는 함수형 컴포넌트와 훅을 통해 데코레이터가 제공했던 기능을 대체하고 있다. 이로 인해 데코레이터의 사용이 감소하고 있으며, 리액트 개발에서 함수형 컴포넌트와 훅이 주류를 이루고 있다. 개발자들은 이제 데코레이터의 복잡성을 피하고, 훅을 통해 더욱 간결하고 직관적인 코드를 작성하고 있다.