shouldComponentUpdate 와 React.memo
프로젝트를 최적화하기 위해 여러가지 방법을 찾아보다가 shouldComponentUpdate 라는 메서드를 처음 알게되었다.
shouldComponentUpdate
shouldComponentUpdate란?
컴포넌트의 prop이나 state가 변경될때, 변화가 있는지를 확인하고 렌더링 여부를 결정할 수 있다. (true => rendering, false=> no rendering)
성능 최적화만을 위한 메서드로 렌더링을 방지하는 용도로 사용할 경우 버그가 발생할 수 있다.
props와 state가 변경되어 렌더링이 발생하기 직전에 호출된다.
그런데, 일반적으로 shouldComponentUpdate는 직접 작성하기 보다 PureComponent를 사용하는방식으로 대신된다고한다.
그렇다면 다시 PureComponent는 무엇인가..
React.PureComponent
PureComponent 란?
React.Component와 거의 유사하나 내부적으로 shouldComponentUpdate를 구현하며 props와 state를 이용한 얇은 비교를 구현한다는 차이가 있다.
즉 PureComponent가 이미 shouldComponentUpdate를 내포하고 있다고 보면 될 것 같다.
단, PureComponent는 얇은비교를 하므로 객체등의 타입을 제대로 비교하지 못한다는 것을 기억해야한다!
PureComponent가 props를 비교하여 렌더링 여부를 결정한다는 점에서 비슷한 함수가 하나 떠오른다. 바로 React.memo이다.
해당 글도 React.memo와 shouldComponentUpdate의 차이가 무엇인가 싶어서 작성하게 되었다.
React.memo
React.memo 란?
동일한 props에 따른 호출 결과를 메모이징 해두었다가 props가 변경도되지않을 경우 마지막 렌더링된 결과를 재사용한다.
만약 이전props와 최신 props를 비교하여 렌더링 여부를 결정하고 싶다면 React.memo의 두번째 인자로 비교함수를 전달하면된다.
function MyComponent(props) {
/* props를 사용하여 렌더링 */
}
function areEqual(prevProps, nextProps) {
/*
nextProps가 prevProps와 동일한 값을 가지면 true를 반환하고, 그렇지 않다면 false를 반환
*/
}
export default React.memo(MyComponent, areEqual);shouldComponentUpdate vs React.memo
React.memo는 두번째 인자의 함수가 true를 return할 경우 렌더링이 유지되고 그 반대의 경우에 재평가된다.
반면 shouldComponentUpdate는 true를 return 할 경우 재평가가 발생한다.
즉 작동 방식이 반대이다.
React.memo를 언제 사용해야할까?
일반적으로 함수형 컴포넌트를 구현하므로 React.memo를 기준으로 할때, React.memo는 최적화를 하기 매우 좋은 도구이다. 그렇다면 모든 컴포넌트를 React.memo로 감싸는것이 좋을까?
당연히 아니다.
React.memo를 사용하면 props의 결과를 기억하고 props를 비교하는 과정이 추가로 들어간다. 이 또한 비용이다.
React.memo는 단지 위에 설명한 비용과 재평가의 비용을 바꾼것이다.
만약 빈번하게 props가 변경되는 컴포넌트에 React.memo를 사용한다면 그저 비용을 두배로 지불할 뿐이다.
