Velog
"use client"는 무엇을 하나요?
'use client'는 Next.js App Router에서 React Server Components(RSC)와 Client Components를 구분하는 경계를 선언하는 지시문으로, 이 지시문이 있는 파일부터 클라이언트 번들에 포함되기 시작한다. 단순히 브라우저에서만 실행된다는 의미가 아니라, RSC 트리에서 클라이언트 컴포넌트의 '진입점'을 표시하는 것이며 하위 컴포넌트 전체가 클라이언트 번들에 포함된다.
핵심 요약
이 아티클은 React 컴포넌트와 렌더링 흐름를 실무 판단 기준으로 다시 정렬해 주는 읽기 자료입니다. 'use client'는 Next.js App Router에서 React Server Components(RSC)와 Client Components를 구분하는 경계를 선언하는 지시문으로, 이 지시문이 있는 파일부터 클라이언트 번들에 포함되기 시작한다. 단순히 브라우저에서만 실행된다는 의미가 아니라, RSC 트리에서 클라이언트 컴포넌트의 '진입점'을 표시하는 것이며 하위 컴포넌트 전체가 클라이언트 번들에 포함된다. 'use client'의 의미를 정확히 이해해야 번들 크기를 최적화하고 서버/클라이언트 컴포넌트를 올바르게 조합할 수 있다.
이 아티클은 React 컴포넌트와 렌더링 흐름를 면접에서 바로 꺼낼 수 있는 답변 프레임으로 접어 두는 메모처럼 읽으면 좋습니다.
React 컴포넌트와 렌더링 흐름를 설명할 때 정의만 말하면 답변이 얕아지기 쉽습니다. 'use client'는 RSC와 Client Component의 경계(boundary)를 선언하며, 이 파일과 그 하위 임포트들이 클라이언트 번들에 포함됨을 의미한다. 실무 판단 근거와 면접 답변의 밀도를 동시에 끌어올릴 수 있습니다.
학습 포인트
면접 답변으로 연결할 학습 포인트입니다.
use client는 RSC와 Client Comp
'use client'는 RSC와 Client Component의 경계(boundary)를 선언하며, 이 파일과 그 하위 임포트들이 클라이언트 번들에 포함됨을 의미한다. 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
use client는 RSC와 Client Comp를 개념으로만 기억하고 맥락 없이 적용하면 'use client'는 RSC와 Client Component의 경계(boundary)를 선언하며, 이 파일과 그 하위 임포트들이 클라이언트 번들에 포함됨을 의미한다. 패턴 이름만 외우고 적용 조건을 구분하지 않으면 비슷한 문제에 같은 해법을 남용하게 됩니다.
React Server Components는 서버에
React Server Components는 서버에서만 실행되며 useState, useEffect, 브라우저 API를 사용할 수 없고 async/await로 데이터를 직접 페치할 수 있다. 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
React Server Components는 서버에를 개념으로만 기억하고 맥락 없이 적용하면 React Server Components는 서버에서만 실행되며 useState, useEffect, 브라우저 API를 사용할 수 없고 async/await로 데이터를 직접 페치할 수 있다. 패턴 이름만 외우고 적용 조건을 구분하지 않으면 비슷한 문제에 같은 해법을 남용하게 됩니다.
use client 컴포넌트도 서버에서 HTML 생
'use client' 컴포넌트도 서버에서 HTML 생성(SSR)을 위해 한 번 실행될 수 있으며, 이후 클라이언트에서 하이드레이션된다. 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
use client 컴포넌트도 서버에서 HTML 생를 개념으로만 기억하고 맥락 없이 적용하면 'use client' 컴포넌트도 서버에서 HTML 생성(SSR)을 위해 한 번 실행될 수 있으며, 이후 클라이언트에서 하이드레이션된다. 패턴 이름만 외우고 적용 조건을 구분하지 않으면 비슷한 문제에 같은 해법을 남용하게 됩니다.
읽는 순서
- 1이론
""use client"는 무엇을 하나요?"의 멘탈 모델과 요약을 먼저 읽고, React 컴포넌트와 렌더링 흐름와 관련된 핵심 용어 3개를 적어보세요.
- 2구현
"use client"는 무엇을 하나요?에서 다룬 아이디어를 작은 예제로 직접 구현하거나 기존 코드에 대입해 보면서 적용 조건을 확인하세요.
- 3실무
현재 프로젝트에서 React 컴포넌트와 렌더링 흐름와 연결되는 화면이나 코드 리뷰 사례를 찾아, 어디서 같은 판단이 필요한지 정리해보세요.
- 4설명
동료에게 "Next.js의 'use client' 지시문이 정확히 무슨 의미인지, 그리고 어디에 위치시켜야 하는지 설명해보세요."에 대한 답을 5분 안에 설명해보세요. 막히는 부분이 아직 이해가 얕은 구간입니다.
면접 연결 질문
[감점 답변] 용어 정의만 반복하거나 ""use client"는 무엇을 하나요?에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] RSC 트리에서 클라이언트 번들의 진입점을 표시. 이 지시문이 있는 파일과 그 하위 임포트가 클라이언트 번들에 포함됨. 가능한 한 하위 레벨 컴포넌트에 배치해야 번들 크기 최적화 가능. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
[감점 답변] 용어 정의만 반복하거나 ""use client"는 무엇을 하나요?에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] RSC: 서버에서만 실행, 번들에 포함 안 됨, DB/파일 시스템 직접 접근, useState/useEffect 불가. Client: 인터랙션/상태/브라우저 API 필요 시 사용. 기본적으로 서버, 상호작용이 필요할 때만 클라이언트. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
[감점 답변] 용어 정의만 반복하거나 ""use client"는 무엇을 하나요?에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] 직접 import는 Client Component로 변환시킴. children props 패턴을 사용하거나, RSC에서 Client Component를 import하고 Server Component를 children으로 넘기는 방식 사용. 컴포지션 패턴 설명. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
자기 점검
"use client는 RSC와 Client Comp"를 기능 목록으로만 외우는 것. 실제로는 왜 이 접근이 필요한지와 적용 조건까지 설명해야 합니다.
좋은 사례만 기억하고 실패 조건을 빼먹는 것. 실제 면접에서는 언제 위험해지는지까지 함께 말해야 합니다.