VibeCoding 365 바이브 코딩 사전
클라이언트 컴포넌트
영어 표기
Client Component
예시
사전 검색 필터처럼 사용자가 입력할 때 즉시 목록이 좁혀지는 UI는 클라이언트 컴포넌트로 만들고, 검색어 state와 onChange 핸들러를 두되 서버 비밀값이나 DB 쿼리는 넣지 않도록 리뷰하면 브라우저 동작과 보안 경계를 함께 지킬 수 있다.
클라이언트 컴포넌트는 Next.js App Router에서 브라우저에서 실행되어야 하는 React 컴포넌트이다. 파일 맨 위의 'use client' 지시어로 표시하며, state, 이벤트 핸들러, 브라우저 API, 사용자 입력처럼 화면에서 즉시 반응해야 하는 기능을 담당한다. 바이브 코딩에서는 AI가 모든 파일에 무심코 'use client'를 붙여 번들을 키우거나, 반대로 클릭 동작이 필요한 컴포넌트를 서버 컴포넌트로 남기는 실수를 할 수 있으므로 실행 위치를 구분해야 한다.
- 카테고리
- 프론트엔드·UI
- 난이도
- basic
- 태그
- ClientComponent · Next.js
- 슬러그
- client-component
- 상태
- published
- 정렬 순서
- 119
함께 읽기