Class Component: React.PureComponent

state 또는 props가 변경될때 마다 전체적으로 render함수가 호출된다. 그럼에도 성능이 좋은 이유는 바로 React는 Vertual DOM을 사용하기 때문이다. 메모리상에 있는 DOM 안에서 이전 데이터와 새로운 데이터와 비교를 해 수정된 부분만 찾아내어 실제 DOM에 render되기 때문이다.

 

React.PureComponent는 컴포넌트를 업데이트 해야하는지 안해야하는지 판단해준다. 이때 비교는 shallow comparison. (오브잭트의 레프런스만 비교하는 수준. 레프런스의 데이터까지는 비교하지 않는다. ← deep comparison)

 

- Shallow comparison

ex1:

const data = { name: "chanki", age: "33" }

 

const newData = this.state.data

newData.name = "gildong"

 

** console.log( data === newData ) // true (속성값이 다르더라도 서로 참조하는 값이 같기 때문이다. render함수를 호출하지 않는다.)

이유: newData는 data를 참조하기 때문에 true이다.

 

ex2:

const data = { name: "chanki", age: "33" }

const newData = { name: "chanki", age: "33" }

 

*console.log( data === newData ) // false (참조reference가 다르기 때문이다. render함수를 호출한다)

 

즉, 얕은 비교의 값이 true일 경우 PureComponent는 rerender 함수를 호출하지 않는다. 반대로 false의 경우 render 함수를 호출한다.

 

사용방법 [1] : 이와 반대로 deep comparison은 오브젝트의 속성값을 비교해 true/false를 반환하기 때문에 PureComponent 사용 시 state 또는 props를 객채의 형태로 받아오지 않고 그 객채 안의 속성값을 특정지어 전달하여 사용할 수 있다.

 

사용방법 [2] : 

 

!!중요!!

오브젝트의 데이터를 직접적으로 수정하는 것은 가급적 피해야 한다. 오리지널 오브젝트를 복사해 변경되는 값을 적용한뒤 새로운 오브젝트로써 바꿔주는 것을 기억하자.

키워드: (ES6) Deconstructing, Spread syntax