본문 바로가기
Frontend#Frontend#React조회 2

Reconciliation란?

정의

React가 두 Virtual DOM 트리를 비교해 변경점을 찾아내는 알고리즘. key prop이 이 과정의 힌트.

다른 표현재조정React Reconciliation

Reconciliation이란?

React가 이전 트리와 새 트리를 비교해 무엇이 바뀌었는지 효율적으로 계산하는 과정이다. 전체 비교(O(n³))는 비현실적이라 휴리스틱을 씀.

핵심 규칙

  • 루트 엘리먼트 타입이 다르면 전체 재생성
  • 타입 같으면 props만 업데이트
  • 리스트는 key로 매칭

왜 key가 중요한가

key 없이 리스트 중간에 삽입하면 React가 이후 모든 항목을 "변경"으로 간주해 불필요한 재렌더 + 포커스 소실 + 애니메이션 끊김이 발생한다. 안정적 고유 키 필수.

🔗 함께 보면 좋은 용어

Frontend 전체 →