[React] Stateful 컴포넌트보다 Stateless 컴포넌트로 작성하자

React

React에서 컴포넌트(Component) 란?

React는 아래와 같이 컴포넌트(Component)를 만들고, 컴포넌트를 조합해서 UI를 구현합니다.

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Sateful 컴포넌트와 Stateless 컴포넌트

위와 같이 작성하는 React 컴포넌트 중 state 를 사용하는 경우를 Stateful 컴포넌트라 하고, state 를 사용하지 않는 컴포넌트를 Stateless 컴포넌트 라 합니다. 만약 state를 사용하지 않는 Stateless 컴포넌트로 작성할 수 있다면 최대한 state를 사용하지 않도록 컴포넌트를 구현해야 이해하기 쉽습니다. 이해하기 쉬워야 결과를 예측하기 쉽고 결과를 예측하기 쉬워야 버그나 유지보수가 쉬워집니다.

Stateful 컴포넌트

class Clock extends React.Component {
  constructor(props) {
    super(props);
    // state 를 생성한다.
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        {/* state 의 date 값을 사용한다 */ }
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

Stateless 컴포넌트

function Clock(props) {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    );
}

Stateless 컴포넌트를 함수형 컴포넌트로 구현하는게 일반적인 패턴입니다.