[React.js] Component, PureComponent, Functional Component 차이

출처:  

리액트(React) 이해 기초 - Component vs PureComponent vs Functional Component 

https://www.vobour.com/%EB%A6%AC%EC%95%A1%ED%8A%B8-react-%EC%9D%B4%ED%95%B4-%EA%B8%B0%EC%B4%88-component-vs-purecomp

[React.JS] 강좌: 함수형 컴포넌트 (Functional Component) 

https://velopert.com/2994

---

1. React.Component(클래스 컴포넌트) vs React.PureComponent(클래스 컴포넌트) 

React.Component 와 React.PureComponent 는 shouldComponentUpdate 라이프사이클 메소드를 다루는 방식을 제외하곤 동일하다. React.Component를 확장해 컴포넌트를 만들 때, shouldComponentUpdate 메소드를 별도 선안하지 않았다면 컴포넌트는 props, state 값이 변경되면 항상 랜더링을 새롭게 한다.(리랜더링)  

그러나 React.PureComponent를 확장해 만들면 shouldComponentUpdate를 선언하지 않아도 내부에서 props와 state를 shallow level 안에서 비교하여 변경된 값이 있을때만 리랜더링 한다. 

그 외 둘의 차이점은 없다.

2. 함수형 컴포넌트와 클래스 컴포넌트 

state와 라이프사이클 메소드(componentDidMount, shouldComponentUpdate 등)와 ref 콜백을 사용할 수 없다. 다만 react 16에서는 함수형 컴포넌트 성능이 조금 더 빨라졌다. 

첫 마운팅 속도가 7%~11% 빠르다고 함.

https://github.com/missive/functional-components-benchmark 

그렇다면 React.PureComponent를 항상 사용하면 좋을까? 

위에도 언급했듯이 shallow level로만 데이터를 비교하기 때문에 nested object등의 변경된 데이터는 감지하지 못한다. 그래서 React.Component의 shouldComponentUpdate를 직접 다뤄야 한다. 

# 정리

클래스 컴포넌트의 기능(state, 라이프사이클, ref)가 필요하지 않은 상황은 함수형으로 만드는 것이 좋다.