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

 

React에서 모든 컴포넌트에 state가 있어야 하는 것은 아니다.

 

어떤 컴포넌트는 state정보가 없는 stateless 컴포넌트도 있을 수 있다. 

 

state가 없을때에도 class형 컴포넌트를 사용해도 된다.

 

하지만 React에서 함수형 컴포넌트에 hooks 기술이 도입된 이후에는 class형 컴포넌트에서만 사용된 state를

 

더욱 간결하게 작성할 수 있게 되었다.

 

 

class형 컴포넌트

 

 

위 사진상, class형 컴포넌트를 사용하였지만 class컴포넌트에서만 사용할 수 있는 state와 LifeCycle을 사용하지 않고

 

오로지 화면에 보여지는 return을 위해서만 존재한다. 

 

 

 

function 컴포넌트

 

 

따라서, 이와 같이 화면에 보이기만 할 때에는 return만  존재하는 함수형 컴포넌트가 코드상 가독성이 높고 간결하다.

 

그리고 함수형 컴포넌트는 LifeCycle을 사용할 수 없으며, state는 hooks로 대체할 수 있다.

 

상황에 따라 어떤 형의 컴포넌트를 사용해야 하는지는 개발자 기준에 따라 달라질 수 있으나,

 

개인적으로 LifeCycle이 필요 하지 않다면, 함수형 컴포넌트를 더욱 선호한다.