오늘 배운 React 렌더링에 대해

Source: Dev.to

React의 렌더링 프로세스 (간단 요약)

상태(state)나 props가 변경될 때마다 React는 컴포넌트를 다시 렌더링합니다. 이는 브라우저 DOM이 즉시 업데이트된다는 의미는 아닙니다. 대신 React는:

• 컴포넌트 함수를 다시 실행하고
• 새로운 Virtual DOM 트리를 생성하고
• 이전 트리와 비교하며
• 실제 DOM에서 실제로 변경된 부분만 업데이트합니다

이 비교 단계는 diffing이라고 부릅니다.

Diffing 작동 방식

React는 오래된 Virtual DOM 트리와 새로운 트리를 효율적으로 비교하기 위해 reconciliation 알고리즘을 사용합니다. 이 과정을 빠르게 유지하기 위해 React는 두 가지 핵심 가정을 따릅니다.

Rule 1: Different Element Types Produce Different Trees

요소 타입이 바뀌면 React는 전체 서브트리가 바뀐 것으로 간주합니다.
예를 들어, <div>가 <span>으로 바뀐다면, React는 자식들을 비교하려 하지 않고 기존 트리를 제거한 뒤 새 트리를 처음부터 구축합니다. 이 단축은 비용이 많이 드는 깊은 비교를 피하게 해 줍니다.

Rule 2: Elements With the Same Stable key Are the Same Across Renders

리스트를 렌더링할 때 React는 key prop을 사용해 요소를 식별합니다.

items.map(item => (
  
))

안정적인 key는 React가 올바르게 다음을 감지하도록 도와줍니다:

• 어떤 아이템이 변경되었는지
• 어떤 아이템이 그대로 남아 있는지
• 어떤 아이템이 추가되거나 제거되었는지

키가 적절히 제공되지 않으면 React는 인덱스로 요소를 매칭할 수 있는데, 이는 잘못된 업데이트와 상태 손실을 초래할 수 있습니다.

key Prop가 중요한 이유

key prop은 React가 렌더링 사이에 요소를 추적할 수 있는 신뢰할 수 있는 방법을 제공합니다.

• 같은 key → 같은 컴포넌트 인스턴스
• 다른 key → 새로운 컴포넌트 인스턴스

React는 키가 없거나 불안정할 경우 경고를 표시합니다. 키는 올바른 diffing과 예측 가능한 동작을 위해 필수이며, 특히 리스트에서 중요합니다.

마무리 생각

이 규칙들을 이해하면 React의 동작을 훨씬 더 예측 가능하게 느낄 수 있습니다. 재렌더링은 피해야 할 것이 아니라, React가 효율적으로 동작하기 위한 핵심 과정입니다. 안정적인 키를 사용하고 diffing 방식을 이해하면 올바르게 동작하고 확장 가능한 컴포넌트를 작성할 수 있습니다.