"use client"는 무엇을 하나요?

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• React Server Components(리액트 서버 컴포넌트)에 익숙하지 않은 개발자
• 리액트 18 이상 버전을 사용하는 프론트엔드 개발자
• 클라이언트/서버 로직 분리에 관심 있는 중급 이상 개발자

핵심 요약

• use client와 use server는 리액트 18에서 도입된 지시어로, 컴포넌트의 렌더링 방식을 명시적으로 제어함
• use client: 클라이언트에서 렌더링되는 컴포넌트(예: 상태가 필요한 UI)
• use server: 서버에서 렌더링되는 컴포넌트(예: 데이터 처리 로직)
• 서버 컴포넌트는 기본적으로 클라이언트에서 렌더링되지 않음 → use client 지시어를 통해 클라이언트 렌더링 가능
• 클라이언트/서버 로직 분리로 성능 최적화 및 유지보수성 향상

섹션별 세부 요약

1. 리액트 서버 컴포넌트의 한계

• 서버 컴포넌트는 기본적으로 클라이언트에서 렌더링되지 않음
• 상태 관리, 이벤트 처리 등 클라이언트 기능이 필요할 경우 use client 지시어 사용 필수

1. use client 지시어의 역할

• 컴포넌트가 클라이언트에서 렌더링되도록 강제
• 예:
  use client
  → 해당 컴포넌트는 클라이언트에서만 실행

1. use server 지시어의 역할

• 서버에서만 실행되는 컴포넌트 정의 → 클라이언트에서 렌더링 시 오류 발생
• 예: 서버 API 로직, 데이터 처리 코드 등에 사용

1. 사용 시 주의점

• use client 지시어가 없는 서버 컴포넌트는 클라이언트에서 렌더링 불가
• 클라이언트/서버 로직 분리로 인해 코드 중복 발생 가능성 → 설계 시 주의

결론

• 리액트 18 이상에서 use client/use server 지시어를 통해 클라이언트/서버 로직 명시적으로 분리 가능
• 성능 향상과 유지보수성을 위해 클라이언트 UI 관련 로직은 use client, 서버 데이터 처리는 use server로 구분
• 실무 적용 시, use client 지시어를 누락할 경우 예기치 않은 렌더링 오류 발생 → 컴포넌트 단위로 지시어 적용 권장