Tistory
두 대의 컴퓨터를 위한 리액트
이 아티클은 Dan Abramov의 "두 대의 컴퓨터를 위한 리액트" 개념을 다루며, React Server Components(RSC)를 서버(첫 번째 컴퓨터)와 클라이언트(두 번째 컴퓨터)가 협력하는 새로운 컴포넌트 모델로 설명합니다. 서버 컴포넌트는 서버에서만 실행되어 JS 번들에 포함되지 않고 데이터를 직접 가져올 수 있으며, 클라이언트 컴포넌트는 인터랙티비티를 담당합니다.
핵심 요약
이 아티클은 React 컴포넌트와 렌더링 흐름를 실무 판단 기준으로 다시 정렬해 주는 읽기 자료입니다. 이 아티클은 Dan Abramov의 "두 대의 컴퓨터를 위한 리액트" 개념을 다루며, React Server Components(RSC)를 서버(첫 번째 컴퓨터)와 클라이언트(두 번째 컴퓨터)가 협력하는 새로운 컴포넌트 모델로 설명합니다. 서버 컴포넌트는 서버에서만 실행되어 JS 번들에 포함되지 않고 데이터를 직접 가져올 수 있으며, 클라이언트 컴포넌트는 인터랙티비티를 담당합니다. 이 두 계층의 명확한 역할 분리가 성능 최적화와 아키텍처 단순화를 가능하게 합니다.
이 아티클은 React 컴포넌트와 렌더링 흐름를 면접에서 바로 꺼낼 수 있는 답변 프레임으로 접어 두는 메모처럼 읽으면 좋습니다.
React 컴포넌트와 렌더링 흐름를 설명할 때 정의만 말하면 답변이 얕아지기 쉽습니다. React Server Components는 서버에서만 렌더링되며 클라이언트 JS 번들에 포함되지 않아 번들 크기를 줄인다. 실무 판단 근거와 면접 답변의 밀도를 동시에 끌어올릴 수 있습니다.
학습 포인트
면접 답변으로 연결할 학습 포인트입니다.
React Server Components는 서버에
React Server Components는 서버에서만 렌더링되며 클라이언트 JS 번들에 포함되지 않아 번들 크기를 줄인다. 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
React Server Components는 서버에를 개념으로만 기억하고 맥락 없이 적용하면 React Server Components는 서버에서만 렌더링되며 클라이언트 JS 번들에 포함되지 않아 번들 크기를 줄인다. 패턴 이름만 외우고 적용 조건을 구분하지 않으면 비슷한 문제에 같은 해법을 남용하게 됩니다.
서버 컴포넌트는 DB
서버 컴포넌트는 DB, 파일 시스템 등에 직접 접근할 수 있으며 async/await를 컴포넌트 내에서 직접 사용할 수 있다. 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
서버 컴포넌트는 DB를 개념으로만 기억하고 맥락 없이 적용하면 서버 컴포넌트는 DB, 파일 시스템 등에 직접 접근할 수 있으며 async/await를 컴포넌트 내에서 직접 사용할 수 있다. 패턴 이름만 외우고 적용 조건을 구분하지 않으면 비슷한 문제에 같은 해법을 남용하게 됩니다.
클라이언트 컴포넌트
클라이언트 컴포넌트('use client' 지시어)는 인터랙티비티, 상태, 브라우저 API가 필요한 경우에만 사용한다. 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
클라이언트 컴포넌트를 개념으로만 기억하고 맥락 없이 적용하면 클라이언트 컴포넌트('use client' 지시어)는 인터랙티비티, 상태, 브라우저 API가 필요한 경우에만 사용한다. 패턴 이름만 외우고 적용 조건을 구분하지 않으면 비슷한 문제에 같은 해법을 남용하게 됩니다.
읽는 순서
- 1이론
"두 대의 컴퓨터를 위한 리액트"의 멘탈 모델과 요약을 먼저 읽고, React 컴포넌트와 렌더링 흐름와 관련된 핵심 용어 3개를 적어보세요.
- 2구현
두 대의 컴퓨터를 위한 리액트에서 다룬 아이디어를 작은 예제로 직접 구현하거나 기존 코드에 대입해 보면서 적용 조건을 확인하세요.
- 3실무
현재 프로젝트에서 React 컴포넌트와 렌더링 흐름와 연결되는 화면이나 코드 리뷰 사례를 찾아, 어디서 같은 판단이 필요한지 정리해보세요.
- 4설명
동료에게 "React Server Components(RSC)와 기존 SSR(Server-Side Rendering)의 차이점을 설명해주세요."에 대한 답을 5분 안에 설명해보세요. 막히는 부분이 아직 이해가 얕은 구간입니다.
면접 연결 질문
[감점 답변] 용어 정의만 반복하거나 "두 대의 컴퓨터를 위한 리액트에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] SSR은 전체 페이지를 서버에서 렌더링하여 HTML을 보내고 하이드레이션이 필요하지만, RSC는 컴포넌트 단위로 서버/클라이언트 경계를 나누고 서버 컴포넌트는 하이드레이션 없이 결과만 전달함을 설명하세요. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
[감점 답변] 용어 정의만 반복하거나 "두 대의 컴퓨터를 위한 리액트에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] 직렬화 가능한 props만 서버→클라이언트로 전달 가능함을 언급하고, 함수나 클래스 인스턴스 전달의 한계를 설명하세요. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
[감점 답변] 용어 정의만 반복하거나 "두 대의 컴퓨터를 위한 리액트에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] 인터랙티비티 필요 여부, 민감한 데이터 접근, SEO 중요도, 번들 크기 최적화 등의 기준을 설명하세요. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
자기 점검
"React Server Components는 서버에"를 기능 목록으로만 외우는 것. 실제로는 왜 이 접근이 필요한지와 적용 조건까지 설명해야 합니다.
좋은 사례만 기억하고 실패 조건을 빼먹는 것. 실제 면접에서는 언제 위험해지는지까지 함께 말해야 합니다.