프론트엔드 개발 · 심화
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의 Concurrent Mode와 useTransition, useDeferredValue에 대해 설명해주세요.
- React의 useImperativeHandle Hook의 용도와 사용법에 대해 설명해주세요.
- React에서 setState 호출이 항상 비동기적으로 동작한다고 말할 수 있을까요? React 18 이전과 이후의 자동 배치(automatic batching) 동작 차이를 setTimeout이나 Promise 콜백 내부에서의 setState를 예로 들어 설명해주세요.
- 함수형 컴포넌트는 클로저를 기반으로 동작합니다. 이로 인해 발생하는 'stale closure(오래된 클로저)' 문제가 무엇이며, setInterval이나 이벤트 구독 안에서 state를 참조할 때 왜 의도치 않은 값이 보이는지, 그리고 이를 해결하는 방법을 설명해주세요.
- 단방향 데이터 흐름을 따르는 React에서, 부모-자식 간 상태를 끌어올리는(lifting state up) 패턴이 깊은 컴포넌트 트리에서 'prop drilling' 문제를 일으킵니다. 이 문제를 Context, composition(children 합성), 상태 관리 라이브러리 중 무엇으로 풀지 판단하는 기준을 설명해주세요.