Class / Functional Component

Class Component

• 클래스형 함수는 ES6 문법을 모두 사용할 수 있다.
• componentDidMount, componentDidUpdate, componentWillMount 등의 lifecycle 메소드를 사용할 수 있다.
• 클래스 컴포넌트는 React.Component를 extend 할 수 있다.
• props 와 state 모두를 가지고 사용할 수 있으며, this 키워드를 사용해서 그들과 해당 컴포넌트 내에서 선언한 함수에 접근할 수 있다.

Functional Component

• 함수형 컴포넌트는 기본적으로 클래스형 컴포넌트의 render 함수이다.
• props 에 접근하고 사용할 수 있지만, state 를 가질 수는 없다.
• lifecycle 메소드를 사용할 수 없다.
• this 키워드를 사용할 수 없다.

함수형 컴포넌트의 장점

• 심플하다.
  • 함수형 컴포넌트를 사용하면 대부분의 환경에서 코드를 몇줄 정도 줄일 수 있다. 그리고 UI 구현에 집중하기 때문에 상대적으로 버그를 빠르게 찾아내고 해결할 수 있다.
• 테스트 최적화
  • 함수형 컴포넌트는 side effect 가 없기 때문에 순수 함수라고 할 수 있다. 따라서 쉽게 테스트가 가능하다. 간결하고 직관적인 구조.
• 최적의 프랙티스
  • 함수형 컴포넌트는 중간중간 state 를 즉흥적으로 사용할 수 없게 하고 최상위 컴포넌트에서 state 를 관리하게끔 함으로써 간접적으로 best practice 를 행하게 한다.

정리

• 요즘 대부분의 기업들이 클래스형 컴포넌트보다는 함수형 컴포넌트를 선호하고 많이들 넘어가는 추세이다.
• 하지만 아직 클래스형 컴포넌트를 사용중인 회사도 많으니 둘다 할 줄 알아야한다.