React - Pure component

React에서 지원하는 컴포넌트중에는 Pure component 라는 컴포넌트가 존재한다. Pure component에 대해 알아보자.

 

---

[ React.PureComponent ]

 

Pure component란 순수 컴포넌트로 같은 props와 state에 대하여 동일한 결과를 렌더링하는 컴포넌트라고 할 수 있다. 

 

일반 React.Component로도  React.PureComponent를 구현할 수 있지만 React.PureComponent를 사용하여 성능 향상을 누릴 수 있다.

 

---

[ PureComponent와 Component의 차이 ]

 

두 컴포넌트의 차이는 생명주기 함수인 'shouldComponentUpdate'를 어떻게 사용하느냐에 따라 갈라진다.

 

[ shouldComponentUpdate ]

 

생명주기 함수인 shouldComponentUpdate는 props 또는 state값이 변경되어 렌더링이 발생하기 전에 호출된다. shouldComponentUpdate가 true를 반환하면 render()가 호출되고, false를 반환하면 render() 함수가 호출되지 않는다. 

 

React.Component는 shouldComponentUpdate를 따로 설정하지 않은 경우 디폴트로 true값을 반환하여 render()함수를 호출한다. 즉, setState가 실행되면 무조건 리렌더링이 일어난다.

 

반면에 React.PureComponent는 shouldComponentUpdate가 이미 구현되어 있어 props랑 state가 얕은비교(shallow compare) 를 통해 변경된점이 있을 경우에 true를 반환하여 render() 함수가 호출되게 한다.

 

이 방식으로 불필요한 리렌더링을 줄여 성능 향상을 꾀한다.

 

 

shallow compare?

• 스칼라 값( numbers, strings )은 값을 비교한다
• Object(객체) 비교는 reference를 비교한다

---

[ 요약 ]

 

[ Pure Component ]

 

순수 컴포넌트. 같은 state, prop값에 대해 같은 컴포넌트를 반환하는 컴포넌트.

 

[ 일반 컴포넌트와의 차이점  ]

 

생명주기 함수 'shouldComponentUpdate' 활용 차이가 있다.

 

'shouldComponentUpdate'는 props, state가 변경되어 리렌더링이 발생하기전에 호출되는 생명주기 함수.

 

일반 컴포넌트의 'shouldComponentUpdate'는 무조건 true를 반환하여 setState이 호출되면 무조건 리렌더링이 일어남.

 

반면에 Pure Component는 state, props를 shallow compare하여 변경점이 있는 경우에만 'shouldComponentUpdate'에서 true를 반환하여 리렌더링이 필요한 경우에만 일어난다. 이를 통해 성능 향상을 꾀한다.

 

출처 

https://stackoverflow.com/questions/36084515/how-does-shallow-compare-work-in-react

https://ko.reactjs.org/docs/react-api.html#reactpurecomponent

https://velog.io/@dolarge/Pure-Component%EB%9E%80