학습 공간 개념 · 판단 · 실험

Fanta Lab

질문 65 · 실전 면접 답변

React는 새 UI 설명을 어떻게 화면에 반영하나요?

이렇게 답해 보세요 (핵심 답변)

상태 변경으로 업데이트가 요청되면 React는 먼저 컴포넌트를 호출해 다음 UI 트리를 계산하는 렌더 단계를 수행합니다. 이어서 이전 트리와 엘리먼트 타입·key를 비교해 변경된 부분만 추려낸 뒤, 커밋 단계에서 실제 DOM 노드를 수정하고 그 후 브라우저가 레이아웃과 페인트를 진행합니다. 따라서 컴포넌트 함수가 다시 실행(렌더)되었더라도 계산 결과가 이전과 같다면 실제 DOM 변경은 일어나지 않을 수 있습니다.

함께 설명하면 좋은 이유 (꼬리질문 대비)

  1. 컴포넌트 호출은 순수한 UI 계산 과정이고, 커밋은 계산 결과를 외부 DOM과 동기화하는 단계입니다.
  2. 트리 위치나 타입, key가 달라지면 React는 기존 상태를 유지하지 않고 컴포넌트를 새로 마운트해 초기화합니다.

면접에서 자주 하는 실수

상태가 바뀔 때마다 React가 항상 전체 DOM 트리를 처음부터 다시 생성한다고 설명하는 것은 부정확합니다.

원리와 예제까지 읽기

공식 참고 자료

질문 목록 출처 ↗ · 원본 65번을 바탕으로 질문과 답변을 새로 정리했습니다.

← React