패스잇
프론트엔드 개발 · 심화

JSX는 결국 React.createElement(또는 jsx 런타임) 호출로 변환됩니다. 이 변환 결과인 element 객체가 어떤 구조를 가지며, 이것이 실제 DOM이 아니라 '설명(description)'에 불과하다는 점이 렌더링 파이프라인에서 어떤 의미를 갖는지 설명해주세요.

힌트 · JSX가 컴파일된 후 만들어지는 객체와 render 단계/commit 단계의 분리 관점에서 접근하세요.

Virtual DOMReact ElementReconciliationDeclarative

모범답안

JSX는 결국 React.createElement 호출로 변환되어 React Element 객체를 생성합니다. 이 객체는 실제 DOM 노드가 아니라, 어떤 종류의 DOM 노드를 어떤 속성과 자식으로 렌더링해야 하는지에 대한 '설명'입니다.

이 '설명'은 React의 렌더링 파이프라인에서 매우 중요합니다. React는 이 Element 객체들을 기반으로 가상 DOM(Virtual DOM)을 구축합니다. 사용자가 UI를 업데이트하면, React는 이전 가상 DOM과 새로운 가상 DOM을 비교하여 변경된 부분만을 식별합니다. 이 과정을 Reconciliation이라고 합니다.

Reconciliation을 통해 최소한의 변경 사항을 파악한 후, React는 실제 DOM에 해당 변경 사항만을 적용합니다. 이러한 '설명' 기반의 접근 방식 덕분에 React는 선언적(Declarative) UI를 구현할 수 있으며, 개발자는 UI의 최종 상태만을 기술하면 React가 효율적으로 DOM을 업데이트해줍니다. 즉, Element 객체는 실제 DOM 조작을 추상화하여 성능 최적화를 가능하게 하는 핵심 요소입니다.

읽었다면, 이제 직접 답해볼 차례예요

패스잇 앱에서 이 질문에 말로 답하면 AI가 꼬리질문까지 이어가며 1:1 코칭합니다.

함께 보는 React 면접 질문

← React 면접 질문 전체 보기