Zustand와 서버 컴포넌트(Server Components)를 결합하여 상태 관리 최적화하기

 

• Zustand를 활용한 클라이언트 및 서버 컴포넌트 상태 공유 방법
• Next.js 서버 컴포넌트(Server Components)와 Zustand의 역할 비교
• 클라이언트 측 상태 관리와 서버 데이터 패칭을 조합하는 최적의 패턴

store/useStore.js (Zustand 상태 관리)

 

import { create } from 'zustand';

const useStore = create((set) => ({
  username: '',
  setUsername: (name) => set({ username: name }),
}));

export default useStore;

 

components/ClientComponent.js (클라이언트 컴포넌트)

'use client';

import useStore from '../store/useStore';

export default function ClientComponent() {
  const { username, setUsername } = useStore();

  return (
    <div>
      <h2>클라이언트 컴포넌트</h2>
      <p>현재 사용자: {username || '없음'}</p>
      <input
        type="text"
        placeholder="이름 입력"
        onChange={(e) => setUsername(e.target.value)}
      />
    </div>
  );
}

 

components/ServerComponent.js (서버 컴포넌트에서 데이터 패칭)

export default async function ServerComponent() {
  const res = await fetch('https://jsonplaceholder.typicode.com/users/1');
  const user = await res.json();

  return (
    <div>
      <h2>서버 컴포넌트</h2>
      <p>서버에서 불러온 사용자: {user.name}</p>
    </div>
  );
}

 

app/page.js

import ServerComponent from './components/ServerComponent';
import ClientComponent from './components/ClientComponent';

export default function Home() {
  return (
    <div>
      <ServerComponent />
      <ClientComponent />
    </div>
  );
}

 

Zustand와 서버 컴포넌트를 조합하면 서버 데이터와 클라이언트 상태를 효율적으로 관리 가능