<aside> 💡 대부분의 경우 리랜더링은 나쁘지 않다. 나쁜건 느린 랜더링이다.

</aside>

TL;DR

리랜더링 자체는 좋은것이다. 앱을 계속 최신화 해주니까

우리가 성능 최적화를 진행할 때 ‘불필요’한 리랜더링을 잡아야 하는지, ‘느린’ 리랜더링을 잡아야하는지 돌이켜볼 필요가 있다.


Re-render

먼저 리랜더링에 대해 제대로 이해하고 넘어가자.

리액트는 왜 빠른가? , 왜 리액트를 사용하는가?

가장 많이 접하는 대답은 바로 **Virtual DOM**을 사용하기 때문일 것이다.

조금만 더 깊게 들어가보자

  1. Virtual DOM 은 왜 빠른가?

    그것은 일반 DOM을 업데이트하는건 느리기 때문이다.

  2. Virtual DOM 은 어떻게 더 빠른가?

    Virtual DOM 은 DOM 업데이트를 일괄적으로 처리하기 때문에 더 빠르다.

  3. Virtual DOM 은 어떻게 일괄적으로 DOM 업데이트를 처리하는가?

    JSX(createElement)를 통해 DOM이 어떻게 생겨야 하는지 묘사하고, 상태가 변경되면 최신 JSX와 마지막 랜더링 시의 JSX를 비교하며, 어떤 DOM 업데이트를 수행할 것인지 파악하고, 가능한 가장 성능이 좋은 방식으로 업데이트를 수행한다.

이때 DOM을 업데이트하는 프로세스를 commit 이라고 하는데,