React | PureComponent & memo ( React 성능개선 )

▷React 주요 컨셉

React에서는 중요한 컨셉을 몇가지로 설명할 수 있다.

1. Compoenents
2. Re-render the whole app on every update
3. Virtual DOM

▷Re-render the whole app on every update

React 어플리케이션은 state가 변화 하거나 관련된 props가 변경 되면 전체적으로 Render가 호출되어 업데이트 된다.
왜냐하면 부모 Component에 state가 있게 되고 그 state가 업데이트가 될 때, 그 안에 들어 있는 모든 자식 Compoenent 또 그 자식의 자식 Component들의 render가 수행되기 때문이다.

"Virtual DOM" 이라는 memory상에 트리를 보관하고 이전과 지금의 업데이트 된 것을 비교해서 실제로 필요한 요소만 DOM요소에 업데이트가 된다.따라서 Re-render로 인한 성능 문제는 성능에 문제는 없다고 한다.

▷Re-render 인한 문제점

-> Re-render로 인해서는 어떤 문제가 있고 어떻게 해결할 수 있는지 알아보자.

부모 Component A가 있고 두 개의 자식 Component B, C가 있다고 하자. A의 state가 업데이트 되거나 A의 부모 혹은 A가 부모에게서 받은 props이 업데이트 되면 자식 B,C는 업데이트와 관련된 props을 받든 받지 않았든 업데이트 된다.

React 어플리케이션은 state가 변화 하거나 관련된 props가 변경 되면 전체적인 업데이트가 일어나고 이는 VDOM에 의해 관리되므로 성능상에는 문제가 없다고 하였다.

✅ ...없지만!!! 예를들어 lifeCycle과 함께 사용하였을때, 문제가 될 수도 있다,

"componentDidUpdate" 를 사용하여 동영상 관련 데이터를 받아온다던지, 조금 무거운 일(로직)을 수행하거나, Component가 업데이트 될 때마다, 무언가 해야하는 일을 하고 있다면, render()가 호출될 때 마다 componentDidUpdate가 호출된다.
이러한 상황에서는 개발자가 예상하지 못한 화면깜빡임이나 불필요한 일들이 수행될 수 있다. (의미도 없는 개고생)

이것을 방지할 수 있도록 해주는 것이 바로 PureComponent & memo 이다.

▷PureComponent & memo

■ PureComponent

PureComponent는 해당 Component의 state나 props에 변화가 없다면 render() 함수가 불려지지 않는다.

공식문서에는 React.PureComponent는 shouldComponentUpdate( )를 얕은 비교(Shallow comparison)를 통해 구현해놓았다고 한다.
즉 오브젝트가 참조하는 레퍼런스 주소만을 비교하여 비교한다.

🌟🌟🌟 React는 Shallow comparison을 이용하기 때문에 state를 업데이트할 때 state를 바로 직접 수정하면 안되는 이유이다!!
state안에 오브젝트가 있고 그 안의 데이터를 변경하더라고 결국 동일한 오브젝트라고 판단하여 업데이트하지 않는다. 따라서 전체적인 오브젝트를 새로 만들고 업데이트 해주어야한다. -> 또 이게 힘들어서 Redux가 나옴! ...이는 나중에 다른 글에 게시할 예정이다.

* 이 함수의 구현사항은 이전의 props나 state를 비교하고 똑같다면 true, 아니면 false를 리턴하여 Component가 업데이트 될 수 있게한다.

■ memo

memo는 "함수형 컴포넌트"에서 PureComponent의 기능과 같이 수행된다.

■ PureComponent & memo가 필요한 경우

: state나 props의 데이터가 변경 되지 않으면 컴포넌트를 업데이트 하지 않아도 되는 경우

■ PureComponent & memo가 불필요한 경우

: 계속해서 state나 props의 데이터가 변경되는 경우

예시에서는 App Component나 Habits Component가 이에 해당한다. 두 컴포넌트는 계속해서 state와 전달되는 props가 바뀌기 때문에 PureComponent, memo가 불필요하다. 왜냐하면 어차피 거의 항상 state와 props이 변하는데 계속해서 이전과 지금의 데이터를 비교하는 쓸모없는 일을 수행하기 때문이다.

▷PureComponent & memo 활용 결론

🌟 뻔한 이야기지만 때에 따라 적절하게 잘 사용하는 것이 좋겠다!!^^

참고자료:
PureComponent
memo