클래스형 컴포넌트 vs 함수형 컴포넌트

먼저 생김새부터 보겠습니다.

1. 클래스형 컴포넌트

class MyClassApp extends Component {
	render() {
    	const kinds = 'class app';
        return <div className="react">{kinds}</div>;
    }
}

 

2. 함수형 컴포넌트

function MyFunctionApp() {
	const kinds = 'function app';
    return <div className="react">{kinds}</div>;
}

 

일단 생김새부터 비교해보면

클래스형은 자바와 비슷하게 class 키워드와 extends 키워드를 사용하는 것을 볼 수 있고

함수형과 다르게 render 함수가 구현되어 있어야 합니다.

함수형은 jsx 형태로 return 한다는 것만 제외하고는 여타 함수와 비슷하지요.

 

기능적인 측면에서 비교해보면 클래스형 컴포넌트는 state 및 lifecycle 관련 기능을 사용할 수 있습니다.( state 및 lifecycle은 나중에 다른 글에서 배워보겠습니다. )

함수형 컴포넌트는 클래스형 컴포넌트보다 선언하기가 편하고 메모리 자원을 클래스형 컴포넌트보다 덜 사용한다는 장점이 있지만 state와 lifecycle 기능을 사용할 수 없다는 단점도 있었습니다. 그러나 v16.8 업데이트 이후 리액트 훅(Hooks)이라는 기능이 도입되면서 해결되었습니다.( 리액트 훅 관련 내용도 나중에 다른 글에서~ )

---

이 글은 김민준(VELOPERT)저자님의 리액트를 다루는 기술 개정판을 참고하여 개인 기록용 및 팀원 공유용으로 작성되었습니다.