React) 불필요한 렌더링을 없애보자!

리액트에서 setState가 호출될 때 마다 렌더링이 일어난다. 과도한 렌더링은 페이지 성능 저하를 야기할 수 있다. 따라서불필요한 렌더링을 최소화 할 필요가 있다. 

---

Class를 사용하는 경우

1. shouldComponentUpdate()

  shouldComponentUpdate(nextProps, nextState, nextContext){
    if(this.state.counter !== nextState.counter){
      return true;
    }
    return false;
  }

 shouldComponentUpdate()를 이용해 렌더링이 발생하는 조건을 설정할 수 있다. 위의 코드에서는 state의 counter 변수의 값이 변경된 경우에만 렌더링이 일어나도록 하고 있다.

2. PureComponent

import React, { PureComponent } from 'react';

class Test extends PureComponent {
  state = {
    counter: 0,
  };
  ...
}

 위에서 얘기한 shouldComponentUpdate()를 자동으로 구현해놓은 Component. state들이 여러개 있으면 바뀌었는지 아닌지를 자동으로 체크함. 하지만 배열과 같은 복잡한 자료구조가 있는 경우 변경을 알아차리지 못하는 경우가 있다.

this.setState({
	array: [...this.state.array, 1]
});

 따라서 배열 수정 시 위와 같이 새로운 배열을 만드는 형식으로 수정해서 React가 배열의 상태 업데이트를 알아차릴 수 있도록 해줘야 한다.

* PureComponent를 쓰는게 더 간단해 보이지만 구조가 복잡한 경우 PureComponent가 상태 업데이트를 제대로 감지하지 못하는 경우가 생기므로 shouldComponentUpdate()를 사용해야 한다. 또한 shouldComponentUpdate() 사용시 PureComponent보다 좀 더 상세한 커스텀이 가능하다.

---

 Hooks

1. React.memo

import React, { memo } from 'react';

const Try = memo(({ ... }) => {
    ...
});

 memo()로 Hooks를 감싸준다.   

 

출처 : 웹 게임을 만들며 배우는 React 3-10 by.Zerocho