리렌더링이 실행되더라도 실제로 달라진 부분만 새로 그런다고 하셨는데.

Question

안녕하세요. 리렌더링 이해하기 회차에서 리렌더링이 실행되더라도 리액트는 실제로 이전과 달라지는 부분만 돔에 새로 그린다고 하셨는데요. LoginForm.js 코드를 실습하면서 크롬 ReactDevTool의 Highlight updates when components render 옵션을 켜두고 확인하고 있는데, id input에 새로운 값들을 입력하여 리렌더링을 발생시키면 ButtonWrapper 이하 내용들도 함께 하이라이팅이 됩니다. styled-component뿐만이 아니라 useMemo로 리렌더링 최적화를 해도 같은 현상이 보여지는데, Highlight updates when components render 옵션같은 경우 렌더링 되는 부분을 하이라이팅 해주는 기능이라고 알고 있는데요. ButtonWrapper 안에 내용도 리렌더링은 되지만 돔에 다시 그려지진 않는다. 라고 이해하면 되는걸까요? 리렌더링이 일어나도 실제로 돔에 다시 그려지지만 않으면 렌더링 최적화를 구현했다. 라고 할 수 있는건지 궁금합니다. 답변 기다리겠습니다:)

제로초(조현영) · Answer

저 기능은 오해가 좀 있는 것이 실제 다시 그려지는 부분을 하이라이트하는 것이 아니라 실행되는 컴포넌트를 하이라이트 것입니다. 대부분의 경우 컴포넌트는 실행될 수 밖에 없습니다. 단적인 예로 부모 컴포넌트가 리렌더링되면 자식 컴포넌트는 줄줄이 다시 실행됩니다. 다만 컴포넌트가 실행되더라도 그 안의 jsx부분이 다시 그려지지 않으면 리렌더링이 되지 않은 것입니다.