React-랜더링-과정

2023-04-25

이 포스트에서는 React 랜더링을 정리해보고자 한다

랜더링이란?

React 에서의 랜더링이란 React 컴포넌트의 상태가 바뀌었을때 업데이트 되어야할 컴포넌트를 찾고, 새로 랜더링을 한 다음 새로운 React 객체 트리를 만들어 실제 DOM과 비교해 바뀐 부분을 DOM에 업데이트 해주는 과정을 말한다

이러한 과정을 통틀어 랜더링이라 말한다 아래 그림은 랜더링을 잘 정리한 그림이다

이 랜더링 과정을 크게 2가지 단계로 나눌수 있는데 각각 render 단계, commit 단계 라고 한다

업데이트가 필요한 컴포넌트를 탐색, 랜더링 이후 바뀌어야할 DOM 부분을 계산, 수집 하는 render 단계

계산된 DOM을 업데이트 하는 commit 단계로 나뉜다

Commit 단계 외의 과정은 모두 Render 단계로 보면 된다

업데이트가 필요한 컴포넌트를 찾고 이를 실행해 새로운 객체 트리를 만든 후

재조정 단계를 통해 기존 DOM 트리와 비교해 바뀌어야 할 변경사항을 계산한다

이 단계는 단순하다 Render 단계를 통해 계산된 변경사항을 실제 DOM에 반영 하는 단계이다

리액트는 부모 컴포넌트가 다시 랜더링 되면 자식 컴포넌트도 바뀐 부분이 없어도 같이 랜더링 된다

이러한 과정은 물론 React 에서 의도된 작동 방식이지만

이러한 방식 때문에 성능에 치명적인 영향을 미치는 경우도 있다

그렇기에 React 에서는 이러한 불필요한 재랜더링을 막기위한 방법을 준비 해놨는데

React,memo() 와 Children 이 2가지로 불필요한 재랜더링을 막을 수 있다

이 두가지에 대한 설명을 다른 포스트에 자세히 써놨으니 해당 포스트를 보면 된다 링크

결론부터 말하자면 체감되는 성능 저하가 없다면 안하는게 좋다

참조한 글에 이에 대한 글이 담겨져 있다

리액트 커뮤니티 전체가 "성능"에 지나치게 집착하는 것 처럼 보이지만 논의의 대부분은 구체적인 사용법에 기반한 것이 아니라 Medium 게시글과 트위터 댓글을 통해 전해지는 낡은 "부족적 지혜"를 중심으로 이루어집니다.

이 포스트에서는 React 랜더링에 대해 간단히 정리 해보았다

랜더링 최적화에 대한 포스팅은 꼭 읽어보길 바란다 실제 개발에 많은 도움이 되었었던 내용이다