클래스형 컴포넌트와 함수형 컴포넌트의 차이

현재 리액트 공식문서에서는 함수형 컴포넌트와 훅을 사용하는 것을 권장하고 있다. 컴포넌트란 템플릿 기능 뿐만 아니라 데이터가 주어졌을 때 이에 맞추어 UI를 만들어주는 기능을 하며, 라이프 사이클 API를 통해 컴포넌트가 화면에 나타나거나 사라질 때, 그리고 변화할때의 작업들을 사용할 수 있다.

 

물론 클래스형 컴포넌트와 함수형 컴포넌트의 하는 일은 거의 동일하지만, 코드 구조에서 약간의 차이가 있으며 엄밀히 말하면 클래스 컴포넌트는 라이프 사이클 기능과 state 관리 기능이 코드에 구현되며, 함수형 컴포넌트는 hook을 통해 라이프 사이클 기능과 state 관리 기능 코드를 짤 수 있다.

 

또한, 함수형 컴포넌트는 클래스형 컴포넌트보다 선언하기 좀 더 편하고, 메모리 자원을 덜 사용한다는 장점을 가지고 있다. 과거 함수형 컴포넌트는 state와 라이프 사이클 API를 사용할 수 없다는 단점이 있었지만 현재 React hook의 등장으로 이 모든 문제가 해결되었다.

 

// 클래스형 컴포넌트

class ClassComponent extends Component {
	state = { count: 0 }
    
    increase = () => {
    	this.setState(({count}) => ({count: count + 1})
    }

	render() {
    	return (
        	<div>
            	<p>count: {this.state.count}</p>
                <button onClick={this.increase}>Increase</button>
            </div>
        )
    }
}

// 함수형 컴포넌트

function FunctionComponent(props) {
	const [count, setCount] = useState(props.count);
    
    return (
    	<div>
        	<p>count: {count}</p>
            <button onClick={() => setCount(count+1)}>Increase</button>
        </div>
    )
}

---

레퍼런스

[React] class 형 컴포넌트 vs function 형 컴포넌트