그알것 — 그럼에도 알아야 할 것들
홈질문커뮤니티
로그인
그알것 — 그럼에도 알아야 할 것들

Service

  • 홈
  • 소개
  • 질문
  • 커뮤니티

My

  • 내 워크스페이스
  • 저장한 질문
  • 작성한 답변

Policy

  • 이용약관
  • 개인정보처리방침
  • 문의

© 2026 그알것 · What Still Matters

질문 목록Rendering
Rendering

리액트 서버 컴포넌트(RSC)에 대해 설명해 주세요.

실무4/5
설계4/5
인간4/5
기초2/5

면접관의 질문 의도

RSC의 장점만 외워 왔는지, 아니면 서버/클라이언트 경계를 직접 그어 본 감각과 트레이드오프까지 같이 풀 수 있는지를 가른다.

큐레이션 답변

학습 자료

서버 컴포넌트(RSC)는 렌더 결과만 클라이언트로 보내고 자기 자신은 클라이언트 번들에 포함되지 않는 컴포넌트다. 서버 내부에서 DB·파일 시스템·비밀 키 같은 자원에 바로 접근할 수 있고, 그 대신 useState·useEffect·이벤트 핸들러 같은 클라이언트 전용 기능은 쓸 수 없다. 인터랙션이 필요한 부분만 "use client"로 분리해 클라이언트 컴포넌트 경계를 새로 그어 줘야 한다. 핵심은 "전부 서버로"가 아니라 인터랙션 밀도에 따라 서버/클라이언트 책임을 다시 나누는 일이다.

좋은 답변 구조

  1. 01RSC가 "서버에서만 도는 컴포넌트"라는 동작 원리와 클라이언트 번들에서 빠진다는 핵심부터 정의한다
  2. 02서버 측 자원 접근의 장점(데이터·비밀·번들 감소)과 제약(훅·이벤트 금지)을 함께 짚는다
  3. 03"use client" 경계 설계가 왜 RSC의 실제 가치를 결정하는지 사례로 풀어 설명한다
  4. 04어떤 화면(콘텐츠 중심 vs 인터랙션 중심)에 잘 맞고 안 맞는지로 마무리한다

자주 실수하는 포인트

RSC를 "SSR의 새로운 이름" 정도로 설명한다
모든 컴포넌트를 서버 컴포넌트로 만들 수 있다고 단정하고 인터랙션 경계의 필요성을 빠뜨린다
"use client"를 최상위에 한 번 붙여 트리 전체를 클라이언트로 끌어오면서 RSC를 "썼다"고 설명한다
서버 컴포넌트에서 useState·useEffect를 쓸 수 있다고 잘못 답한다

실무 맥락

  • 콘텐츠 위주 페이지(상세, 목록)와 인터랙션 위주 위젯이 한 화면에 섞여 경계 설계가 필요한 Next.js App Router 프로젝트
  • DB·서드파티 API 응답을 직접 받아 화면을 구성해야 하지만 비밀 키를 브라우저에 노출하면 안 되는 어드민
  • 클라이언트 번들 사이즈가 커져 초기 로딩 지표가 흔들리는 SaaS의 일부 페이지를 RSC로 옮기는 작업

본인 경험에 녹이는 힌트

Next.js App Router에서 "use client" 경계를 다시 그어 번들 사이즈가 줄어든 경험이 있다면 경계 설계의 실제 효과로 풀어낼 수 있다

RSC에서 서버 데이터를 props로 클라이언트 컴포넌트에 전달하며 직렬화 한계를 만난 경험이 있다면 "경계의 비용" 이야기로 이어갈 수 있다

비밀 키나 SQL 로직을 서버 컴포넌트로 옮겨 보안 표면을 줄여 본 경험이 있다면 "코드 위치가 신뢰 경계다"는 관점으로 풀 수 있다

커뮤니티 인기 답변

전체 0개

아직 공개된 답변이 없어요. 첫 공개 답변을 남겨보세요.

관련 꼬리 질문

Q1서버 컴포넌트와 클라이언트 컴포넌트 경계는 어떤 기준으로 정하나요
Q2서버 컴포넌트에서 클라이언트 컴포넌트로 데이터를 넘길 때 어떤 제약이 있나요
Q3RSC가 어울리지 않는 화면 유형은 어떤 게 있나요
아직 답을 쓰지 않았어요.
큐레이션 답변과 다른 사람 답변을 보고, 자기 언어로 답을 정리해보면 학습 효과가 가장 큽니다.
목차
  • 01면접관의 질문 의도
  • 02큐레이션 답변
  • 03좋은 답변 구조
  • 04자주 실수하는 포인트
  • 05실무 맥락
  • 06본인 경험에 녹이는 힌트
  • 07커뮤니티 인기 답변준비중
  • 08관련 꼬리 질문