[React] PureComponent 과 Component의 비교

React.PureComponent is similar to React.Component. The difference between them is that React.Component doesn’t implement shouldComponentUpdate(), but React.PureComponent implements it with a shallow prop and state comparison. - React.PureComponent

1. 차이점

---

• PureComponent : state와 props이 같으면, this.setState에 의해서 re-render 되지 않습니다.

• Component : state와 props가 같더라도, this.setState로 re-render 됩니다.

2. 예제코드

---

예제 코드를 작성했습니다. (예제코드는 tsx로 작성됨)
Reset State 버튼 : 이 버튼은 cho 라는 state를 cho로 업데이트 합니다.

• PureComponent로 만들어진 PureChild의 경우, count가 올라가지 않습니다.
• Component로 만들어진 RegularChild의 경우, count가 올라갑니다. 즉 re-render 됩니다.

3. 주의할 점

---

1) state와 props가 같은 값인 지 비교하는 방식은 SC(Shallow Comparison)입니다. 따라서 value를 mutate를 할 수도 있다면, PureComponent를 사용하면 안됩니다.

• 예를 들어 state가 array인 경우, push로 state 값을 변경한다면, 참조하는 주소값이 동일하므로, re-render되지 않을 수 있습니다.
  대부분의 경우에는 React.Component를 사용하고, High performance가 필요한 특정 경우에만 React.PureComponent를 사용하는 것이 좋습니다.

2). 위 예제코드의 Parent를 PureComponent로 사용하는 경우, 발생할 수 있는 문제점으로는 Parent가 re-render 되지 않는다면, 하위에 있는 PureChild와 RegularChild 또한 절대 re-render 될 수가 없습니다.

4. 참고

---

https://www.youtube.com/watch?v=YCRuTT31qR0