PureComponent란?
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는 React.Component와 유사한데,
둘의 차이는 React.Component는 shouldComponentUpdate()가 구혀되어있지 않지만,
React.PureComponent엔 prop과 state를 얕게 비교하면서 shouldComponentUpdate()가 구현되어져 있다는 것입니다.
If your React component’s render() function renders the same result given the same props and state, you can use React.PureComponent for a performance boost in some cases.
-> 만약 React 컴포넌트의 render()함수가 동일한 props과 state에 동일한 결과를 렌더링하고 있다면,
성능향상을 위해 React.PureComponent를 사용해볼 수 있습니다.
❗Note
React.PureComponent’s shouldComponentUpdate() only shallowly compares the objects. If these contain complex data structures, it may produce false-negatives for deeper differences.
Only extend PureComponent when you expect to have simple props and state, or use forceUpdate() when you know deep data structures have changed.
Or, consider using immutable objects to facilitate fast comparisons of nested data.
Furthermore, React.PureComponent’s shouldComponentUpdate() skips prop updates for the whole component subtree. Make sure all the children components are also “pure”.
-> 주의!
React.PureComponent의 shouldComponentUpdate()는 object를 "얕게" 비교합니다.
따라서 컴포넌트에 복잡한 데이터구조가 포함되어있다면, 더 깊은 차이가 있음에도 차이가 없다고 판단하는 잘못된 결과를 초래할 수 있습니다.
간단한 props과 state를 가질 것이라 예상될 때 PureComponent를 사용하거나,
깊은 데이터 구조의 변화가 있을 것이라 생각되면 forceUpdate()를 사용하세요.
또는, nested된 데이터의 빠른 비교를 위해 불변객체를 검토해보세요.
더 나아가, React.PureComponent의 shouldComponentUpdate()는 컴포넌트 하위 트리에 대한 props갱신 작업을 수행하지 않습니다. 자식 컴포넌트들이 정말 "pure"한지 확실해야 합니다.
마무리
(하나의 컴포넌트일수도 있지만)
다수의 컴포넌트로 이루어진 리액트 어플리케이션은 props이나 state와 같은 데이터가 조금이라도 업데이트되면 re-render되면서 변경사항을 화면에 보여주게 된다.
React.Component를 상속받아 클래스컴포넌트를 만들 수 있는데,
React.PureComponent라는 걸 상속받아서도 클래스컴포넌트를 만들 수 있다고 한다.
Component와 PureComponent는 비슷하지만
차이가 있기 때문에 두 종류로 나눠져 있는것이 아닐까?
그 차이는 바로 React.Component엔 없는 shouldComponentUpdate()함수가 React.PureComponent엔 구현되어져 있다는 것이다!
그렇다면, shouldComponentUpdate()는 어떤 역할을 하고있을까?
이 함수는 "shallow comparison"를 통해 컴포넌트를 re-render할지 결정하는 역할을 한다.
말그대로 "얕게 비교"하여 리턴값이 true라면 render()를 실행해 컴포넌트가 업데이트 되고,
false라면 업데이트되지 않는다.
"shallow comparison"방식으로 업데이트 여부를 결정한다는 점때문에
PureComponent를 사용해도 문제가 없을지 주의해야한다!
왜냐하면 "shallow comparison"는 오브젝트의 ref만 비교한다는 것으로
만약 오브젝트 자체가 굉장히 중첩되어있고 깊고 복잡한 구조를 지녔다면
오브젝트의 저~ 깊은 곳에서 변경이 있어도 가장 상단의 오브젝트의 ref가 동일하다면
결국 shouldComponentUpdate()는 이전과 동일한 오브젝트라 판단하여 컴포넌트를 업데이트 해주지 못한다!!
( 얕게 비교하므로 상단의 ref만 비교한다. )
따라서,
PureComponent를 사용해 컴포넌트를 만들면 이전의 state와 props를 비교하여
필요할때만 render()를 호출하므로 성능향상에 이점이 있지만,
위 같은 사항을 주의하면서 코드를 작성해야한다.😊
참고
https://reactjs.org/docs/react-api.html#reactpurecomponent
