티스토리 뷰

project/로컬 LLM + RAG 기반 AI 채팅봇 만들기

🚀 FastAPI 기반 로컬 LLM + RAG 챗봇 – Zustand를 활용한 전역 상태 관리

octo54 2025. 2. 27. 15:12

🚀 FastAPI 기반 로컬 LLM + RAG 챗봇 – Zustand를 활용한 전역 상태 관리

이번 글에서는 Next.js에서 Zustand를 사용하여 전역 상태를 관리하는 방법을 다룹니다.
✅ Zustand의 기본 개념을 이해하고, Next.js 프로젝트에서 적용하는 방법을 학습합니다.
✅ 서버 컴포넌트와 클라이언트 컴포넌트 간 Zustand의 사용법을 익힙니다.

📌 1. Zustand란?

Zustand는 가볍고 빠른 전역 상태 관리 라이브러리로, Redux보다 간편하며 성능이 뛰어납니다.
📌 Zustand의 주요 특징:

✅ 사용이 간편 – Redux보다 코드가 간결함
✅ 불필요한 리렌더링 최소화 – 성능 최적화
✅ 서버 컴포넌트(SC) & 클라이언트 컴포넌트(CC)에서 모두 사용 가능
✅ TypeScript 완벽 지원

📌 Zustand vs Redux 비교

특징 Zustand Redux Toolkit

사용법	간단한 API	보일러플레이트 코드 많음
성능	빠름 (불필요한 리렌더링 없음)	미들웨어 필요
상태 저장 방식	React Hook 기반	중앙 집중식

✅ Next.js에서 Zustand는 간단하면서도 강력한 전역 상태 관리 도구입니다! 🚀

📌 2. Zustand 설치 및 설정

✅ 2.1 Zustand 설치

아래 명령어를 실행하여 Zustand를 설치합니다.

npm install zustand

✅ 설치가 완료되면, 전역 상태 관리를 위한 Zustand 스토어를 생성하겠습니다. 🚀

📌 3. Zustand 스토어 생성 및 활용

✅ 3.1 Zustand 스토어 정의

📌 app/store/useStore.ts (Zustand 전역 상태 스토어 생성)

import { create } from "zustand";

interface AppState {
  darkMode: boolean;
  toggleDarkMode: () => void;
}

const useStore = create<AppState>((set) => ({
  darkMode: false,
  toggleDarkMode: () => set((state) => ({ darkMode: !state.darkMode })),
}));

export default useStore;

✅ 이제 Zustand를 사용하여 darkMode 상태를 전역적으로 관리할 수 있습니다! 🚀

✅ 3.2 Zustand 상태를 클라이언트 컴포넌트에서 사용하기

📌 app/components/DarkModeToggle.tsx (Zustand 상태 활용 예제)

"use client";

import useStore from "../store/useStore";

export default function DarkModeToggle() {
  const { darkMode, toggleDarkMode } = useStore();

  return (
    <button
      className={`p-2 rounded ${darkMode ? "bg-black text-white" : "bg-white text-black"}`}
      onClick={toggleDarkMode}
    >
      {darkMode ? "🌙 다크 모드" : "☀️ 라이트 모드"}
    </button>
  );
}

✅ 클릭하면 전역 상태 darkMode가 변경되며 UI가 업데이트됩니다! 🚀

✅ 3.3 Zustand 상태를 Next.js 레이아웃에 적용하기

📌 app/layout.tsx (Zustand 상태 적용)

import DarkModeToggle from "./components/DarkModeToggle";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ko">
      <body>
        <header className="p-4">
          <DarkModeToggle />
        </header>
        <main>{children}</main>
      </body>
    </html>
  );
}

✅ 이제 모든 페이지에서 다크 모드 상태가 유지됩니다! 🚀

📌 4. Zustand와 서버 컴포넌트 연동하기

✅ 4.1 서버 컴포넌트에서 Zustand 사용하기

Zustand는 기본적으로 클라이언트 상태 관리 라이브러리이지만, 서버 상태를 가져와서 초기값으로 설정할 수도 있습니다.

📌 예제 – 서버 데이터로 초기 상태 설정 (app/store/useStore.ts)

import { create } from "zustand";

interface UserState {
  user: string | null;
  setUser: (name: string) => void;
}

const useUserStore = create<UserState>((set) => ({
  user: null,
  setUser: (name) => set({ user: name }),
}));

export default useUserStore;

📌 app/dashboard/page.tsx (서버에서 가져온 데이터로 Zustand 상태 설정)

"use client";

import { useEffect } from "react";
import useUserStore from "../store/useStore";

export default function Dashboard() {
  const { user, setUser } = useUserStore();

  useEffect(() => {
    fetch("/api/user")
      .then((res) => res.json())
      .then((data) => setUser(data.name));
  }, []);

  return (
    <div>
      <h1>대시보드</h1>
      <p>현재 로그인 사용자: {user ?? "로딩 중..."}</p>
    </div>
  );
}

✅ 서버에서 가져온 데이터를 Zustand 상태로 저장하여 모든 컴포넌트에서 활용할 수 있습니다! 🚀

📌 5. Zustand와 React Query의 차이점

기능 Zustand React Query

상태 저장	클라이언트 전역 상태	서버 상태 (API 캐싱)
사용 목적	UI 관련 전역 상태 (ex: 다크 모드)	외부 API 데이터 관리 (ex: 상품 목록)
데이터 캐싱	X	O
Next.js 최적화	클라이언트 전용 (서버와 분리)	서버 상태와 연동 가능

✅ Zustand와 React Query를 함께 사용하면 클라이언트 상태와 서버 상태를 효율적으로 관리할 수 있습니다! 🚀

📌 6. 결론 및 다음 단계

✅ Zustand를 활용하여 Next.js에서 전역 상태를 관리하는 방법을 배웠습니다.
✅ 다크 모드 상태를 Zustand로 전역 관리하고, Next.js 레이아웃에서 활용하는 방법을 익혔습니다.
✅ 서버 데이터와 Zustand를 연동하는 방법을 학습했습니다.
✅ React Query와의 차이점을 비교하고, 두 개를 함께 사용할 수 있음을 확인했습니다.

🚀 다음 글에서는 "3.3.3 React Query와 Zustand의 차이점 및 활용법"을 진행합니다!

'project > 로컬 LLM + RAG 기반 AI 채팅봇 만들기' 카테고리의 다른 글

로컬 LLM + RAG 기반 AI 채팅봇 만들기 # 23 - RAG 기반 검색 및 문서 조회 기능 구현 (0)	2025.02.27
🚀 FastAPI 기반 로컬 LLM + RAG 챗봇 – React Query와 Zustand의 차이점 및 활용법 (0)	2025.02.27
🚀 FastAPI 기반 로컬 LLM + RAG 챗봇 – Next.js에서의 상태 관리 개요 (0)	2025.02.27
🚀 FastAPI 기반 로컬 LLM + RAG 챗봇 – 3.2.3 Next.js의 데이터 페칭 전략 (App Router 방식) (0)	2025.02.27
🚀 FastAPI 기반 로컬 LLM + RAG 챗봇 – 페이지 및 레이아웃 구성 (0)	2025.02.27

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/03 »
일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

글 보관함

TwentyTwentyOne

티스토리 뷰