[React] class와 function 컴포넌트 비교 / Hook이 생겨난 배경

React에서의 class component와 function component의 차이를 정리하고 Hook의 개념이 생겨난 배경을 알아보고자 한다.

1. 함수형 컴포넌트(function style)

• 순수 자바스크립트 함수를 사용해서 컴포넌트를 정의한 것

• 특징

• 코드를 간결하게 작성할 수 있음

• state를 갖지 못하여 setState를 사용하는 것이 불가

• life-cycle함수 사용이 불가

• 선언과 리턴방법

function FuncComp(props){
    return(
        <div>...<div>
    );
}

 

1. 클래스 컴포넌트(class  style)

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

• 특징

• setState를 사용할 수 있음

• 선언과 리턴방법

class ClassComp extends React.Component{
    render(){
        return (
            <div>...<div>
        );
    }
}

위에서 설명한 바와 같이 function component에서는 state를 다루지 못한다. 이밖에 class component에서 가능한 life cycle 메서드를 사용하지 못하는 어려움이 있었다. 

 

이 같은 어려움이 있기 때문에 React 16.8 버전부터 Hook의 개념이 등장했고 class component에서만 사용할 수 있었던  state와 life cycle(componentDIdMount 등)기능을 function component에서도 사용할 수 있게 되었다.