리액트 렌더링 & push(X) & shouldComponentUpdate(nextProps, nextState, nextContext) & {PureComponent}

리액트 사용시 push 사용 하면 안된다.const array = [ ];

 

array.push(1)=>1array;=>[1] const array2 = [ ... array, 2]

기존 배열 복사해놓고, 새로운 것 넣어주기

 

array === array2

=> false

 

리액트 렌더링 기준,

 

이전 state, 현재 state 랑 다르면 렌더링을 한다. 

참조가 바껴야 된다. 알아 차릴 수 있도록 해야한다.

 

 

STATE or PROPS 바뀌었을 때, 렌더가 발생한다.

but setState만 호출해도 렌더링이 된다.

 

 

그래서 내장함수를 사용하여 렌더링 할 경우를 설정해줘야 한다.

 

ex)

shouldComponentUpdate(nextProps, nextState, nextContext){

 if(this.state.counter !== nextState.counter){

  return true;  // 현재 state coutner와 다음 state coutner 값이 다르면 렌더링.

}

  return false;

}

 

************************************************************************

{PureComponent}를 대신 사용해도 렌더링 성능이 좋아진다.

=>shouldComponentUpdate(nextProps, nextState, nextContext)를 자동으로 해준다.

ex)

import React, {PureComponent} from 'react';

 

class test extends PureComponent {

 

}

* 바뀌는 경우만 자동으로 확인해주고 렌더링 해준다.

* 옛날 객체 그대로 가지고 오면 안된다.

* 새로운 객체, 배열을 펼쳐서 추가를 해줘야 한다.