잘 사용되지 않는 메서드들

shouldComponentUpdate(nextProps, nextState) 

shouldComponentUpdate()

• 현재 state 또는 props의 변화가 컴포넌트의 출력 결과에 영향을 미치는지 여부를 React가 알 수 있다

• 기본 동작 : 매 state 변화마다 다시 렌더링을 수행하는 것

• 새로운 값으로 갱신되어서 렌더링이 발생하기 직전에 호출

• 기본 값은 true

• 초기 렌더링 또는 forceUpdate()가 사용될 때 호출 X

• 오직 성능 최적화만을 위한 것

• 렌더링 방지 목적으로 사용 시 버그로 이어질 수 있다 : 그러니까 PureComponent를 사용하는 것이 더 좋다 (props와 state에 대해 얕은 비교 수행,해야 할 갱신 작업을 건너뛸 확률을 낮춘다)

shouldComponentUpdate를 사용할거면

• 이 메서드를 직접 작성할 자신이 있다면 this.props, nextProps, this.state, nextState를 비교한 뒤 false를 반환하는 것으로 React가 갱신 작업을 건너뛰게 만들 수 있다
• false를 반환하는 것이 자식 컴포넌트들이 각자가 가진 state의 변화에 따라 다시 렌더링을 수행하는 것을 막는 것은 아니라는 점에 주의 부탁
• shouldComponentUpdate() : 동일성 검사 수행하거나 JSON.stringify()를 사용하는 것은 권하지 않는다

PureComponent

React.Component

• shouldComponentUpdate() : 구현 X

React.PureComponent

• props, state를 이용한 얕은 비교 구현

React 컴포넌트의 render() 함수가 동일한 props와 state에 대해 동일한 결과 렌더링
React.PureComponent를 사용해 경우에 따라 성능 향상 누릴 수 있다
React.PureComponent의 shouldComponentUpdate()는
컴포넌트에 대해 얕은 비교만 수행
컴포넌트에 복잡한 자료구조 포함 시 깊은 차이 존재해도 차이 없다고 판단 가능
props와 state의 구조가 간단할 것 같을 때만 PureComponent 상속

깊은 자료 구조의 변화가 있다면 forceUpdate() 사용
중첩된 데이터들을 빠르게 비교할 수 있도록 불변 객체 사용 검토

props와 state의 구조가 간단할 것으로 예상될 때에만 PureComponent를 상속
깊은 자료 구조의 변화가 있다면 forceUpdate()를 사용
중첩된 데이터들을 빠르게 비교할 수 있도록 하려면 불변 객체의 사용 검토

더 나아가 React.PureComponent의 shouldComponentUpdate()는 컴포넌트의 하위 트리에 대한 props 갱신 작업을 수행하지 않습니다. 자식 컴포넌트들이 “순수”한지 꼭 확인하기 바랍니다.