Pure Component & Functional Component

리액트(React)에서 컴포넌트를 생성하는 방법은 Class 기반으로 React.Component 또는 React.PureComponent를 extends하는 방법과, Functional Stateless Component로 생성하는 방법이 있습니다. 이 글에서는 React의 각 Component에 대한 개념과 차이점을 학습해 보도록 하겠습니다.

**차례** - Pure Component - Functional Component - Higher Order Component - React.memo

Pure Component

Pure Component에 대한 React 공식 문서의 소개글을 보면 아래와 같습니다.

React.PureComponent is similar to React.Component. The difference between them is that React.Component doesn’t implement shouldComponentUpdate(), but React.PureComponent implements it with a shallow prop and state comparison.
If your React component’s render() function renders the same result given the same props and state, you can use React.PureComponent for a performance boost in some cases.

위 문서를 참고하면, React.Component와 Pure Compoment와의 차이는 shouldComponentUpdate 라이프 사이클 메소드입니다. Pure Component는 prop / state의 shallow-comparison에서 변경 사항이 발생하면 리렌더링을 하게 됩니다. 반면, React.Component는 해당 라이프 사이클 메소드를 별도로 선언하지 않았다면, props / state 값이 변경되면 항상 리렌더링이 됩니다.

이 글을 정리하다 보니 갑자기 렌러링 성능 문제를 겪었던 것이 생각이 났습니다. React와 D3를 함께 사용할 때 props / state 가 변동함에 따라 렌더 수가 급격히 늘어나 성능 문제가 발생했었습니다. Pure Component를 잘 사용하면 렌더 성능 문제를 해결할 수 있을것 같은데 다시 코드를 수정해 봐야겠습니다. :)

...정리 후 추가 예정입니당~

Functional Component

Functional Component는 이름 그래도 말 그대로 Javascript 함수입니다. Functional Component는 Class Component와 달리 State, 라이프 사이클 메소드, ref 콜백을 사용할 수 없습니다. ...정리중입니당~