전역 상태관리 설정
1️⃣ 전역 상태 관리(Global State Management)란?
전역 상태 관리란?
- 리액트 컴포넌트끼리 *데이터(상태)를 공유하기 위해 사용하는 패턴
- 예를 들어, 로그인한 유저 정보, 다크모드 설정, 장바구니 데이터 등 여러 컴포넌트에서 공통으로 사용하는 상태
- 로컬 상태(useState)는 특정 컴포넌트에서만 사용하는 상태(예: input 값)
- 전역 상태는 프로젝트 전체(또는 여러 컴포넌트)에서 공유해야 하는 상태(예: 로그인 정보, 테마, 실시간 알림)
2️⃣ 전역 상태 관리의 구분(서버 vs 클라이언트)
🔗 1) 서버 상태(Server State) - 비동기 호출로 불러온 데이터
- 서버(API)에서 가져온 데이터
- 예: 게시글 목록, 채팅 내역, 사용자 목록
- 주로 데이터 패칭, 캐싱, 로딩/에러 처리
- React Query, SWR 같은 라이브러리가 담당
서버 상태(데이터) 관리에 있어 중요한 지점은?
서버에서 가져온 데이터를 언제 Refetching(갱신)할 것인가임.
화면 볼 때, 페이지 전환될때, 이벤트가 발생했을때, 포커스가 들어왔을 때 등
💻 2) 클라이언트 상태(Client State) - 페이지 데이터
- 사용자 인터페이스(UI) 상태, 로컬 UI 이벤트
- 예: 모달 열림/닫힘, 테마 설정, 선택된 아이템(버튼 등)
- Recoil, Jotai, Zustand, 혹은 간단히 Context API
3️⃣ 전역 상태 관리 라이브러리 종류
| 구분 | 라이브러리 | 특징 |
|---|---|---|
| 서버 상태 | React Query | 데이터 패칭, 캐싱, 로딩/에러 관리, 폴링 |
| 서버 상태 | SWR | Next.js에서 자주 쓰임, 데이터 캐싱 |
| 클라이언트 상태 | Recoil | 간단하고 직관적, atom 단위로 상태 관리 |
| 클라이언트 상태 | Jotai | 훅 기반, 코드 가벼움 |
| 클라이언트 상태 | Zustand | Flux 패턴, 단일 store로 관리 |
| 클라이언트 상태 | Redux Toolkit | 대규모 프로젝트, 복잡한 상태 관리 |
| 둘 다 | Apollo Client | GraphQL 주로 사용 (서버 상태 + 캐시) |
📌 현 프로젝트
- React + TypeScript + Vite
- Ant Design + Toast UI
- JSON Server로 테스트 중
- 아직 백엔드 연동 전(추후 스프링부트 연동)
- 실시간 웹소켓 통신(채팅), 서버통신 필요
요구 사항:
✅ 서버 데이터 관리 (REST API)
✅ 실시간 웹소켓 통신 데이터 관리
✅ UI 전역 상태(모달, 토스트, 테마 등)
✅ Vite + TypeScript 기반으로 효율적인 상태 관리
🔎 결론:
| 관리 도구 | 관리 대상 | 설명 | |
|---|---|---|---|
| zustand | 선택된 채팅번호 | 전역 선택 상태. 여러 컴포넌트에서 쉽게 가져다 씀 | chatStore |
| 직원 상태 | 버튼/셀렉트에서 바로 상태 변경 가능 | loginInfoStore | |
| 모달 열림 여부, UI toggle | 모달 open/close 상태 등 | ||
| 현재 선택된 사이드 메뉴 | 메뉴 선택 상태 | ||
| React Query & lukemorales | 상담 리스트 | 서버 데이터 fetch 및 캐싱 | |
| 상담 상세 데이터 | 선택된 채팅 번호로 상세 조회 | ||
| 채팅 데이터 | 채팅 기록 등 | ||
| 상담사 리스트 | 상담사 선택 셀렉트 | ||
| 페이징 처리, 검색 필터 | 테이블 필터링, 검색조건 등 | ||
| Context API | 테마/언어 설정 | 라이트/다크모드, 다국어 | |
| 권한(관리자/사용자) | 화면 접근 제어 | ||
| 로그인 상태(SSR 필요 시) | Next.js SSR 시 초기 데이터 주입 |
npm install @lukemorales/query-key-factory
npm install zustand @tanstack/react-query