728x90

React.Component vs React.PureComponent

차이점 : shouldComponentUpdate() 구현 유무 (PureComponent에 구현)

 shouldComponentUpdate()의 내용을 직접 작성하는 대신 PureComponenet를 사용하는게 좋음

 

shouldComponentUpdate()

역할 props와 state를 이용한 얕은 비교를 구현
효과 React 컴포넌트의 render() 함수가 동일한 props와 state에 대하여 동일한 결과를 렌더링한다면, 성능향상
동작 기본 동작은 매 state 변화마다 다시 렌더링 수행
리턴 논리값 (기본값 true)
호출
  • 렌더링 발생 직전에 호출
  • 초기 렌더링 또는 forceUpdate()가 사용될 때, 호출되지 않음
특징
  • 현재 state 또는 props의 변화가 컴포넌트의 출력 결과에 영향을 미치는지 여부를 React가 알 수 있다.
  • 컴포넌트의 하위 트리에 대한 props 갱신 작업을 수행하지 않는다.
  • false 반환 시, React가 개신작업을 건너뛰게 만듦
    • UNSAFE_componentWillUpdate(), render(), componentDidUpdate() 호출되지 않음
    • 자식 컴포넌트들의 state 변화에 따라 다시 렌더링을 수행하는걸 막는게 아님

 

728x90

'IT > React' 카테고리의 다른 글

[React] Port 변경 방법  (0) 2022.08.10
[React] Props의 기본값은 True  (2) 2022.06.15

+ Recent posts