프론트엔드 개발 · 심화
React 렌더링 파이프라인에서 RSC(React Server Component)가 생성한 Payload를 클라이언트(브라우저)가 받아 기존 DOM과 병합하는 과정(Reconciliation)을 담당하는 React API는 무엇인가요?
힌트 · 클라이언트 측 React 런타임이 `use` 훅이나 초기 렌더링 파이프라인을 통해 RSC 스트림을 파싱하고 React Element Tree로 변환하여 병합합니다.
useTransitionuseDeferredValueSuspenseReactDOM.hydrateRoot
모범답안
RSC 페이로드를 클라이언트에서 받아 DOM과 병합하는 과정은 복합적으로 이루어집니다. 핵심적인 React API는 ReactDOM.hydrateRoot와 use 훅입니다.
ReactDOM.hydrateRoot는 서버에서 렌더링된 HTML을 초기 렌더링 시점에 클라이언트에서 "hydration"하는 역할을 합니다. 즉, 서버에서 생성된 DOM 구조를 기반으로 React 컴포넌트를 연결하고 이벤트 리스너를 부착하여 인터랙티브하게 만듭니다.
RSC 페이로드는 use 훅을 통해 비동기적으로 로드되고, React는 Suspense 바운더리를 사용하여 로딩 상태를 관리합니다. use 훅은 RSC에서 반환된 Promise를 처리하고, 데이터가 준비되면 컴포넌트를 업데이트합니다. 이 과정에서 React는 기존 DOM과 새로운 React Element Tree를 비교하여 필요한 부분만 업데이트하는 Reconciliation 과정을 거칩니다. useTransition이나 useDeferredValue를 사용하여 업데이트 우선순위를 조절하여 사용자 경험을 개선할 수도 있습니다.
읽었다면, 이제 직접 답해볼 차례예요
패스잇 앱에서 이 질문에 말로 답하면 AI가 꼬리질문까지 이어가며 1:1 코칭합니다.
함께 보는 Next.js 면접 질문
- Middleware 파일 내부에서 조건부로 사용자를 로그인 페이지로 리다이렉트 시키려면 어떤 클래스의 메서드를 반환해야 하나요?
- App Router의 Route Handlers(`app/api/route.ts`)에서 동적 라우팅 파라미터(예: `[id]`)에 접근하려면 함수의 매개변수를 어떻게 정의해야 하나요?
- RSC Payload(React Server Component Payload) 내부 구조는 대략적으로 어떤 형태로 구성되어 있나요?
- Next.js 14의 Partial Prerendering(PPR)을 사용할 때, 특정 컴포넌트가 동적(Dynamic) 렌더링되도록 트리거하는 가장 보편적인 React API는 무엇인가요?
- Next.js의 Data Cache가 무효화(revalidate)될 때, 즉시 백그라운드에서 새 데이터를 가져오나요, 아니면 다음 요청이 올 때까지 기다렸다가 무효화 처리(On-demand)를 하나요?
- Edge Runtime 환경에서 작동하는 Middleware가 Vercel의 KV(Redis)나 데이터베이스에 접근할 때 지연 시간을 줄이기 위해 설계된 아키텍처적 위치의 특징은 무엇인가요?