React 부모 컴포넌트의 props가 같은 값으로 set 했을 시 자식 컴포넌트에서의 rendering에 대해서

제목이 길다.

 

간단하게 상황 가정을 해보면 부모 컴포넌트와 자식 컴포넌트가 있다.

부모 컴포넌트에서는 parentValue라는 state가 있고 자식 컴포넌트는 해당 값을 props로 받아서 사용한다.

이때 부모 컴포넌트에서 parentValue가 같은 값으로 setState 했을 시 자식 컴포넌트에서는 무슨 일이 일어날까?

 

먼저 결론부터 얘기하면 rendering이 일어난다.

아래의 동영상을 보자

해당 영상에서 parentValue에 a를 덧붙이는 버튼과 같은 값으로 setState를 하는 버튼이 있다.

a를 덧붙이는 버튼은 당연히 값이 바뀌니 update가 일어난다.

그런데 같은 값으로 바꾸는 버튼을 눌렀을 때에도 update가 일어나는 것을 볼 수 있다.

(update가 일어나는 여부는 React Developer Tools V3의 Highlight Updates를 사용하였다.)

 

그렇다면 같은 값이여도 rendering이 되는 것을 볼 수 있고, 이는 경우에 따라 다를 수 있지만 대부분의 상황에서 같은 값인데 rendering을 하는 것은 비효율적일 수 있다.

이때 이러한 비효율적인 면을 막을 수 있는 방법이 무엇이 있을까?

 

react lifecycle에 shouldComponentUpdate 단계에서 막을 수 있다.

shouldComponentUpdate가 하는 역할은 return 값에 따라 render를 할지 말지 정하는 것인데, return true면 rendering을 하게 되고, return false면 rendering이 일어나지 않는다. 기본적으로는 true를 return 한다.

shouldComponentUpdate에서 받는 값은 nextProps, nextState, nextContext 로 3가지가 있으며, 각각 직역하는 의미 그대로 변화될 Props 값, 변화될 State 값, 변화될 Context 값이다.

 

여기서 우리는 자식 컴포넌트만 update 하지 않게 하려면 자식 컴포넌트에서 shouldComponentUpdate를 제어하면 된다.

제어하는 방법은 간단하게 다음과 같이 쓰면 된다.

shouldComponentUpdate(nextProps, nextState, nextContext) {
  return this.props.parentValue !== nextProps.parentValue
}

shouldComponentUpdate에서 props의 parentValue와 nextProps의 parentValue를 비교하여 일치하지 않을 경우에만 true를 반환하게 해 주면 된다.

그렇다면 자식 컴포넌트에서는 parentValue가 같은 값으로 변경될 시에 render가 일어나지 않게 된다.

 

그럼 부모 컴포넌트에서는 어떻게 할까?

부모 컴포넌트에서도 마찬가지로 shouldComponentUpdate를 활용하면 된다.

shouldComponentUpdate(nextProps, nextState, nextContext) {
  return this.state.parentValue !== nextState.parentValue
}

단, 자식 컴포넌트와 다른점은 부모 컴포넌트는 props가 아닌 state를 이용해서 비교해주면 된다.

 

참고로 부모 컴포넌트에서 rendering이 일어나지 않게 하면 자식 컴포넌트에서도 당연히 rendering이 일어나지 않게 된다.

 

이렇게 간단하게 React의 성능을 미세하게나마 더 올릴 수 있다.

 

정리

1. 같은 값으로 state가 변경돼도 rerendering은 일어난다. (같은 값인데도 rerendering을 하면 특수한 경우를 제외하고는 비효율적)

2. 해당 현상을 막아야 한다면 shouldComponentUpdate를 활용하면 된다.

3. 부모 컴포넌트에서 rendering이 일어나지 않으면 자식 컴포넌트에서도 rendering이 일어나지 않는다.

 

해당 포스팅 관련 코드 링크