react-state-management
React 상태 관리 구현
React 컴포넌트 간 상태 관리는 복잡한 코드와 일관성 없는 데이터로 이어질 수 있습니다. 이 기술은 로컬, 글로벌 및 서버 상태를 효율적으로 처리하기 위해 Redux Toolkit, Zustand, Jotai 및 React Query에 대한 포괄적인 패턴을 제공합니다.
스킬 ZIP 다운로드
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
토글을 켜고 사용 시작
테스트해 보기
"react-state-management" 사용 중입니다. 작은 앱에서 간단한 글로벌 상태 요구 사항에 어떤 상태 관리 라이브러리를 사용해야 하나요?
예상 결과:
간단한 글로벌 상태가 필요한 작은 애플리케이션의 경우 Zustand나 Jotai가 excellent choices입니다:
**Zustand**는 최소한의 보일러플레이트로 가장 간단한 API를 제공합니다:
- 단일 훅 유사 함수로 스토어 만들기
- 내장된 devtools 및 지속성 미들웨어
- 프로바이더 불필요
- 선택적 구독이 불필요한 재렌더링을 방지합니다
**Jotai**는 원자적, 세분화된 업데이트가 필요할 때 탁월합니다:
- 각 상태 조각이 독립적인 atom입니다
- 파생 atoms가 다른 atoms에서 자동으로 계산됩니다
- 세밀한 반응성에 완벽합니다
통합 스토어 모델을 선호한다면 Zustand를 선택하세요. 글로벌 스토어 래퍼 없이 원자적 업데이트를 원한다면 Jotai를 선택하세요.
"react-state-management" 사용 중입니다. React Query로 서버 상태를 처리하고 Redux Toolkit으로 클라이언트 상태를 처리하는 방법은?
예상 결과:
명확성과 유지보수를 위해 서버 상태와 클라이언트 상태를 분리하세요:
**React Query가 서버 상태를 처리합니다:**
- 서버 데이터, 캐싱 및 동기화
- 자동 리페칭 및 백그라운드 업데이트
- Stale-while-revalidate 캐싱 전략
- 롤백이 포함된 낙관적 뮤테이션
**Redux Toolkit이 클라이언트 상태를 처리합니다:**
- 사용자 인터페이스 상태(모달, 사이드바 열기/닫기)
- 인증 상태(쿠기에 없을 때)
- 애플리케이션 기본 설정 및 설정
- 복잡한 클라이언트 측 파생 상태
이 분리는 concerns 혼합을 방지하고 각 도구가 명확한 목적을 가지므로 디버깅을 쉽게 만듭니다.
보안 감사
안전All 44 static findings are false positives. The scanner incorrectly flagged markdown code blocks as shell commands, standard documentation URLs as hardcoded secrets, and React/Redux patterns (state, slices, selectors) as cryptographic or reconnaissance patterns. This is legitimate documentation for React state management libraries.
품질 점수
만들 수 있는 것
새 프로젝트에 대한 상태 솔루션 선택
React 애플리케이션을 시작하는 개발 팀이 앱 크기와 요구 사항에 따라 적절한 상태 관리 접근 방식을 선택해야 합니다.
서버 데이터 캐싱 구현
프론트엔드 개발자가 React 애플리케이션에서 API 데이터에 대한 캐싱, 백그라운드 리페칭 및 낙관적 업데이트를 추가하려고 합니다.
레거시 Redux를 최신 패턴으로 마이그레이션
개발자가 자세한 Redux 보일러플레이트 코드를 Immer를 사용한 Redux Toolkit으로 업데이트해야 합니다.
이 프롬프트를 사용해 보세요
React 앱에서 TypeScript와 함께 Redux Toolkit을 어떻게 설정하나요? 슬라이스가 포함된 스토어와 타입화된 useDispatch 및 useSelector 훅을 만드는 방법을 보여주세요.
localStorage에 지속되고 devtools 지원이 포함된 Zustand 스토어를 만드는 방법을 보여주세요. 컴포넌트에서 스토어에 접근하는 방법과 타입화된 상태 업데이트 처리 방법을 포함하세요.
낙관적 업데이트를 수행하는 React Query 뮤테이션을 작성하세요. 이전 상태 스냅샷을 위한 onMutate, 롤백을 위한 onError, 리페칭을 위한 onSettled를 포함하세요.
서버 상태를 위한 React Query와 클라이언트 전용 상태를 위한 Zustand를 같은 애플리케이션에서 어떻게 결합하나요? concerns 분리 및 컴포넌트가 둘 다 사용하는 방법을 보여주세요.
모범 사례
- 상태를 사용하는 곳에 최대한 가깝게 배치 - 모든 것을 글로벌 상태에 넣는 것을 피하세요
- 스토어에서 필요한 데이터만 선택하기 위해 선택자를 사용하여 불필요한 컴포넌트 재렌더링 방지
- 서버 상태(React Query)를 클라이언트 상태(Zustand/Redux)와 분리 - 각각 다른 업데이트 패턴과 수명을 가짐
피하기
- 여러 컴포넌트에서 접근하기 때문에 모든 상태 조각을 글로벌 상태에 넣기 - 로컬 상태가 종종 충분함
- 이뮤터블 업데이트 패턴이나 Immer 같은 라이브러리 대신 상태를 직접 변형
- React Query와 클라이언트 스토어 모두에 서버 상태 중복 - 서버 데이터에 대한 단일 진실 공급자로 React Query 허용