Render triggers

리렌더링 원인은 입력 변화에서 시작해 트리로 퍼진다

state, props, 부모 렌더, context, 강제 업데이트는 모두 컴포넌트 함수 재실행으로 이어질 수 있습니다. 비용은 그 다음 단계에서 커집니다.

state 내 상태 변경

setState 호출로 해당 컴포넌트가 다시 실행됩니다.

props 부모가 새 값 전달

전달받은 값이 바뀌면 자식은 새 JSX를 계산합니다.

parent 부모 리렌더링

관련 없는 자식도 기본적으로 함께 다시 호출될 수 있습니다.

context Context 값 변경

구독 중인 컴포넌트들이 같은 변경을 받습니다.

force 강제 업데이트

드물지만 수동으로 렌더 흐름을 밀어 넣을 수 있습니다.

01 컴포넌트 함수 실행

렌더 함수 내부 계산과 변수 선언이 다시 수행됩니다.

02 새 JSX 생성

이전 결과와 비교할 새 가상 DOM 설명이 만들어집니다.

03 재조정

React가 이전 트리와 새 트리를 비교해 변경 범위를 찾습니다.

04 DOM 반영

필요한 변경만 반영하지만, 렌더 계산 비용은 이미 발생했습니다.

문제 신호

값이 변하지 않았는데 Highlight updates가 넓게 깜빡이면 원인을 좁혀야 합니다.

해결 방향

상태 위치를 낮추거나, 측정된 병목에 한해 memo 계열 도구를 적용합니다.