[React] React.PureComponent 이해하기

🚀  들어가며...

• React 컴포넌트를 정의할 때에 PureComponent를 사용했었는데, 이 컴포넌트는 도대체 어떤것인지, 왜 사용해야 하는지 알아봅시다.

📑 내용

React에는 3가지 Component들이 존재합니다.

• React.Component

class MainContainer extends Component {
    render() {
        return (
            <div>
                Hello
            </div>
        )
    }
}

• React.PureComponent

class MainContainer extends PureComponent {
    render() {
        return (
            <div> 
                Hello 
            </div>
        )
    }
}

• Function Component

const MainContainer = () => {
    return (
        <div>
            Hello
        </div>
    )
};

각 컴포넌트들의 세세한 특징들이 있겠지만, PureComponent 와 Component의 차이를 설명하자면,

두 컴포넌트의 차이는 shouldComponentUpdate() 라이프 사이클 입니다.

• React.PureComponent는 React.Component에 shouldComponentUpdate()가 적용된 버전입니다.
  (엄밀히 말하면 shouldComponentUpdate()안에 얕은비교가 적용된 버전입니다.)

shouldComponentUpdate 에서 변경 여부를 확인하고 Re-render 여부를 결정 지을 수 있지만 그렇기에는 공수가 많이 들기 때문에 PureComponent가 만들어졌습니다.

 

그렇다면, 어떻게 써야할까요?    몇가지 테스트를 해보았습니다.

 

[Test1] 부모만 PureComponent (자식들은 일반 Component)

• 부모만 PureComponent일 때는 자식 한명이 바뀌어도 모두 Re-render 됩니다 .

[Test2] 자식1만 PureComponent (부모, 자식2 일반 Component)

• PureComponent 자식1 을 변경 했더니, 다른 자식도 Re-render 되었습니다.
• 하지만 자식2를 변경 했더니, PureComponent인 자식1은 Re-render 되지 않았습니다.

[Test3] 자식 모두 PureComponent (부모 일반 Component)

• 자식 모두 PureComponent로 선언 하니, 서로의 영향을 받지 않았습니다.
• PureComponent는 변경 된 점이 있는지 체크하고, Render 여부를 판단하기 때문에 변경이 되지 않은 PureComponent 자식을 Re-render 시키지 않았습니다.

[Test4] 모두 PureComponent

• 부모 또한, PureComponent 일 때도 Test3 과 같은 방식으로 Render 되었습니다.
• 여기서 우린 부모 Component를 PureComponent로 설정 하는 것은 낭비 라는 것을 알 수 있습니다.

그렇다면.. 어디까지 부모라고 보아야하고,
어디를 PureComponent로 설정해야 할까요?

• 단순하게 생각하면 같은 계층에 컴포넌트가 존재한다면 PureComponent로 만드는게 좋아보입니다.

하지만 이 부분은 단순히 결정할 문제는 아니고, 컴포넌트들의 구조를 짜면서 어디 까지를 그룹화 시킬 것이고, 각 Component들이 어디 까지 영향을 미치게 할지 설계를 하는 부분에서 PureComponent를 정할 수 있을 것입니다.

 

[더 많은 비용 발생]

(PureComponent를 쓰지 않아, 무분별한 Re-render가 발생) > (의미 없는 PureComponent들의 얕은 비교 연산)

 

🙋🏻‍♂️ 후기

• Depth가 깊어지면 깊어질 수록 PureComponent는 단순하지만 어렵습니다. 하지만, TestCase를 이해하게 되면 어떻게 동작 되는지 감이 오실겁니다.
• 이해가 되지 않는다면 Component 보단 PureComponent를 쓰는것을 추천드립니다. 굳이 변화를 비교 할 필요없는 Component들이 PureComponent가 되어 비교를 진행하는 연산 보다는 무분별하게 Re-render 되는 비용이 분명 클 것입니다.

🔗  참고한 글

https://ko.reactjs.org/docs/react-api.html#reactpurecomponent

React 최상위 API – React