어떤 ReactJS 문법이 더 좋을까요

어떤 ReactJS 구문을 사용해야 할까요: React.createClass 또는 ES6 extends?

ReactJS에 처음 접하신 분들은 React 컴포넌트를 작성하기 위해 두 가지 다른 구문인 React.createClass와 ES6 extends를 마주칠 수 있습니다. 이 블로그 포스트에서는 이 두 개의 구문을 살펴보고 React 애플리케이션에서 어떤 구문을 사용하는 것이 좋은지 알아보겠습니다.

React.createClass 문법

React.createClass 문법은 React 컴포넌트를 정의하는 더 오래된 방법입니다. 객체 리터럴 구문을 사용하여 컴포넌트를 정의할 수 있습니다. 예를 들면 다음과 같습니다:

React.createClass({
  displayName: 'Counter',
  getDefaultProps: function(){
    return {initialCount: 0};
  },
  getInitialState: function() {
    return {count: this.props.initialCount};
  },
  propTypes: {initialCount: React.PropTypes.number},
  tick() {
    this.setState({count: this.state.count + 1});
  },
  render() {
    return (
      <div onClick={this.tick}>
        클릭수: {this.state.count}
      </div>
    );
  }
});

React.createClass를 사용하는 주요 장점은 컴포넌트 내의 모든 메소드가 자동으로 컴포넌트 인스턴스에 바인딩된다는 것입니다. 그러나 믹스인을 지원하지 않는다는 단점이 있어 유연성이 제한될 수 있습니다.

ES6 Extends 문법

ES6 extends 문법은 React 컴포넌트를 작성하는 더 최근 접근 방식입니다. 이는 ES6 클래스 구문을 활용하고 React.Component 클래스를 상속합니다. 예를 들면 다음과 같습니다:

class Counter extends React.Component {
  static propTypes = {initialCount: React.PropTypes.number};
  static defaultProps = {initialCount: 0};

  constructor(props) {
    super(props);
    this.state = {count: props.initialCount};
  }

  tick() {
    this.setState({count: this.state.count + 1});
  }

  render() {
    return (
      <div onClick={this.tick.bind(this)}>
        클릭수: {this.state.count}
      </div>
    );
  }
}

ES6 extends 구문은 보다 현대적이고 간결한 컴포넌트 정의 방법을 제공합니다. 또한 정적 속성의 사용을 지원하여 propTypes 및 defaultProps를 클래스 내에서 직접 정의하기 쉽게 만듭니다. 그러나 React.createClass와 달리 onClick 이벤트 핸들러에서 보여진 것과 같이 메소드를 컴포넌트 인스턴스에 수동으로 바인딩해야 합니다.

어떤 구문을 선택해야 할까요?

그래서 ReactJS 프로젝트에서 어떤 구문을 사용해야 할까요? 일반적으로 ES6 extends 구문을 채택하는 것이 권장되고 있습니다. Facebook은 React.createClass 접근 방식이 곧 사용 중단될 것이라고 밝혔으며 ES6 클래스 구문의 사용을 선호합니다.

ES6 extends 문법은 보다 현대적이고 가독성이 좋은 코드 구조를 제공합니다. 이는 진화하는 JavaScript 표준과 조화를 이루며 Babel 및 기타 ES6 기능과의 통합이 더 용이합니다. 또한 ES6 구문을 사용하면 향후 JavaScript 버전과의 호환성을 보장할 수 있습니다.

그러나 ES6 extends 문법은 믹스인을 지원하지 않습니다. 따라서 컴포넌트에서 명시적으로 믹스인에 의존하는 경우 React.createClass 접근 방식을 유지하거나 HOC(Higher-Order Components) 또는 Object.assign()과 같은 대체 솔루션을 살펴볼 필요가 있습니다.

결론

마무리로, ReactJS 컴포넌트를 작성하는 데 권장되는 방법은 ES6 extends 문법입니다. 이는 보다 현대적이고 가독성이 좋은 코드 구조를 제공하며, 계속 발전해나가는 JavaScript 표준 및 React 팀의 가이드라인에 따라 코드를 조정할 수 있습니다.

전반적으로 ReactJS 최적의 사례를 따라가고 React 팀이 정한 표준과 지침에 따라 코드를 조정하는 것이 중요합니다.

참고 자료 : 

reactjs