Class Component, Functional Component

컴포넌트

컴포넌트는 React애서 만든 기능을 한 번만 쓰고 말거나 코드를 복사해서 붙여넣기 할 필요 없이 각 기능을 작은 조각으로 만들어 필요할 때 마다 불러와 쓰는 것이다.
그리고 그 컴포넌트의 종류는 2가지로 class component와 function component가 있다.

export defualt class ClassComponent extends React.Component{
render(){
return <div>힘세고 강한 아침</div>
}}

export default function FunctionComponent(){
return <div>힘세고 강한 아침</div>
}

위 두 내용 모두 같은 결과를 보여준다.
두 컴포넌트는 비슷한 부분도 있지만 여러 차이점이 존재한다.

클래스 컴포넌트는

render() 메소드가반드시 필요하다.
state, life cycle을 사용한다.
this 라는 개념을 사용한다.

함수 컴포넌트는

state, life cycle 대신 hook을 사용한다(useState 등)
함수를 선언할 때 const를 사용한다.
메모리 자원 소모가 덜하다.

등등 여러 차이점이 있다고 한다.

요새 더 많이 사용되는 것은 함수 컴포넌트인데
그 이유는

클래스의 this가 어디서 실행하는지에 따라 변하기 때문에 혼란이 생길 수 있다.
메모리 자원 소모가 덜하다.
함수에서는 hook을 사용해 편의성이 좋다.

외의 이유가 있다.

그렇다면 클래스 컴포넌트를 익힐 필요가 없을까?

익힐 내용이 줄어든다면 좋겠지만 클래스 컴포넌트는 아직 많이 쓰이고 있다고 한다.
기존에 개발된 코드를 유지보수할 때도 필요하고,
라이브러리를 살펴보면 예시 코드가 클래스 컴포넌트인 것을 확인 할 수 있다.(예 : antd의 Rate)
때문에 둘 다 사용법을 익혀둘 필요가 있겠다.