[React] 함수형 컴포넌트와 클래스기반 컴포넌트의 차이점

October 21, 2018 - [react]

순수 자바스크립트 함수를 이용하여 컴포넌트를 정의한 것

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>
}

React.Component 를 상속받은 클래스를 이용하여 컴포넌트를 정의한 것

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

구분	함수형 컴포넌트	클래스기반 컴포넌트
장점	코드를 간결하게 작성할 수 있다.	N/A
단점	state를 갖지 못하므로 setState 사용불가 life-cycle 함수 사용 불가	N/A

괜히 고민하지 말고 그냥 다 클래스기반 컴포넌트로 작성하면 속 편하다.
stateless 컴포넌트로 한정하여(제약적으로) 사용하거나 stateless 함을 명시적으로 표현하고자 하는 경우에는 함수형 컴포넌트를 사용할 수 있다.
~~함수형 컴포넌트는 리액트 차기 버젼에서 (지금은 아닌 듯) 더 나은 성능을 낼 수 있을 지도 모른다.~~
그 외 굳이 함수형 컴포넌트를 써야 할 이유는 없을 것 같다.