상태관리 설정 변경
1차 상태관리 설정
| 관리 도구 | 관리 대상 | 설명 | |
|---|---|---|---|
| zustand | 선택된 chatSeq | 전역 선택 상태. 여러 컴포넌트에서 쉽게 가져다 씀 | chatStore |
| 로그인 상태(변경이 잦을 때) | 버튼/셀렉트에서 바로 상태 변경 가능 | loginInfoStore | |
| 모달 열림 여부, UI toggle | 모달 open/close 상태 등 | ||
| 현재 선택된 사이드 메뉴 | 메뉴 선택 상태 | ||
| React Query & lukemorales | 상담 리스트 | 서버 데이터 fetch 및 캐싱 | |
| 상담 상세 데이터 | 선택된 채팅 번호로 상세 조회 | ||
| 채팅 데이터 | 채팅 기록 등 | ||
| 상담사 리스트 | 상담사 선택 셀렉트 | ||
| 페이징 처리, 검색 필터 | 테이블 필터링, 검색조건 등 | ||
| Context API | 테마/언어 설정 | 라이트/다크모드, 다국어 | |
| 권한(관리자/사용자) | 화면 접근 제어 |
✅ 서버 상태 (React Query)
👉 데이터가 서버와 동기화되는 부분 (API fetch/mutate)
예: 로그인 상태, 상담 리스트, 상세 데이터, 페이징, 필터, 채팅 데이터 등
✅ 클라이언트 상태 (zustand)
👉 UI 상태 (모달 열림/닫힘, 선택 상태, toggle, chatSeq)
✅ Context API
👉 권한(관리자/사용자), 테마, 언어 설정 등 비교적 변하지 않는 글로벌 상태
npm install @lukemorales/query-key-factory
npm install zustand @tanstack/react-query🔑 나만 언제 써야하는지 헷갈렸나?
정리하자면, 중요한 건 발생지! 클라이언트에서 발생 or 서버에서 발생
- ❓ 데이터가 서버와 동기화되어야 하나?
- YES → React Query
- NO → zustand
- ❓ API 호출이 필요한가?
- YES → React Query
- NO → zustand
- ❓ UI 상태나 토글인가?
- YES → zustand
최종
| 관리 도구 | 관리 대상 | 설명 | zustand로 유지 | React Query로 이동 |
|---|---|---|---|---|
| zustand | 선택된 chatSeq | 전역 선택 상태. 여러 컴포넌트에서 쉽게 가져다 씀 | ✅ | |
| 모달 열림 여부, UI toggle | 모달 open/close 상태 등 | ✅ | ||
| 현재 선택된 사이드 메뉴 | 메뉴 선택 상태 | ✅ | ||
| React Query | 로그인 상태 | 서버 fetch 후 상태 유지/변경 | ❌ | ✅ |
| 상담 리스트 | 서버 데이터 fetch 및 캐싱 | ❌ | ✅ | |
| 상담 상세 데이터 | 선택된 채팅 번호로 상세 조회 | ❌ | ✅ | |
| 채팅 데이터 | 채팅 기록 등 | ❌ | ✅ | |
| 상담사 리스트 | 상담사 선택 셀렉트 | ❌ | ✅ | |
| 페이징 처리, 검색 필터 | 테이블 필터링, 검색조건 등 | ❌ | ✅ | |
| Context API | 테마/언어 설정 | 라이트/다크모드, 다국어 | ✅ | |
| 권한(관리자/사용자) | 화면 접근 제어 | ✅ |
