react-zustand-patterns
React Zustand 스토어 패턴 개선
React 팀은 Zustand를 사용할 때 오래된 상태, 렌더링 타이밍, 비동기 액션 버그를 겪을 수 있습니다. 이 스킬은 스토어, selector, 파생 상태, 테스트, 디버깅, persistence를 위한 직접적인 패턴을 제공합니다.
내 에이전트로 설치
이 요청을 에이전트에 복사하세요. 공식 Skill 페이지와 매니페스트가 포함되어 있습니다.
Review the Skillstore skill "react-zustand-patterns" from https://skillstore.io/skills/cjharmath-react-zustand-patterns.md and its manifest at https://skillstore.io/api/skills/cjharmath-react-zustand-patterns/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.에이전트는 계속해서 계획을 표시하고 보안 정책에서 요구하는 확인을 요청해야 합니다.
에이전트가 읽기 쉬운 리소스
AI 에이전트, 크롤러, 스크립트가 전체 페이지 대신 정리된 컨텍스트만 필요할 때 이 링크를 사용하세요.
테스트해 보기
"react-zustand-patterns" 사용 중입니다. 컴포넌트가 increment action 직후 count 값을 읽습니다.
예상 결과:
답변은 스토어 상태가 즉시 업데이트되는 반면, 컴포넌트 화면은 React가 다음 렌더링을 완료한 뒤 변경된다고 설명합니다.
"react-zustand-patterns" 사용 중입니다. 비동기 액션이 지연된 save 작업 후 캡처된 데이터를 읽습니다.
예상 결과:
답변은 지연 후 현재 스토어 데이터를 읽고, 그 현재 값을 기준으로 상태를 업데이트할 것을 권장합니다.
"react-zustand-patterns" 사용 중입니다. selector가 매 렌더마다 새 객체를 반환합니다.
예상 결과:
답변은 이것이 추가 렌더링을 유발할 수 있는 이유를 설명하고, 설치된 Zustand 버전에 맞는 안정적인 selector 패턴을 제안합니다.
보안 감사
안전All static findings are false positives caused by Markdown code fences, inline code, and illustrative Zustand examples. The skill contains guidance text only; no executable shell commands or live network behavior were found in SKILL.md. No prompt injection language or suspicious intent was identified.
위험 요인
⚙️ 외부 명령어 (31)
🌐 네트워크 접근 (2)
이 보고서 공유 및 인용
버전이 지정된 평가 보고서, 중립 배지, 임베드 카드 및 인용을 공유하세요. Skillstore는 근거를 보고하지만 이 Skill의 안전 여부를 판단하지 않습니다.
보고서 링크 복사
https://skillstore.io/skills/cjharmath-react-zustand-patterns/audits/7?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 배지
[](https://skillstore.io/skills/cjharmath-react-zustand-patterns?utm_source=security_passport_badge)HTML 배지
<a href="https://skillstore.io/skills/cjharmath-react-zustand-patterns?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/cjharmath-react-zustand-patterns/security.svg" alt="Skillstore security assessment" loading="lazy"></a>임베드 카드
<iframe src="https://skillstore.io/embed/skills/cjharmath-react-zustand-patterns.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>학술 인용 (APA · BibTeX · CFF)
APA 인용
CJHarmath. (2026). react-zustand-patterns security audit report (audit version 7) [Author version unspecified]. Skillstore. https://skillstore.io/skills/cjharmath-react-zustand-patterns/audits/7BibTeX 인용
@techreport{cjharmath-cjharmath-react-zustand-patterns-2026,
author = {CJHarmath},
title = {react-zustand-patterns security audit report (audit version 7)},
institution = {Skillstore},
year = {2026},
number = {7},
url = {https://skillstore.io/skills/cjharmath-react-zustand-patterns/audits/7},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "react-zustand-patterns security audit report (audit version 7)"
version: "unspecified"
type: report
authors:
- name: "CJHarmath"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/cjharmath-react-zustand-patterns/audits/7"
identifiers:
- type: other
value: "skillstore:cjharmath-react-zustand-patterns:audit:7"
description: "Skillstore immutable audit report identifier"
Skillstore 점수
이 점수의 이유 증거 신뢰도: 높음만들 수 있는 것
오래된 React 상태 디버그
타이밍 패턴을 사용해 컴포넌트가 re-render되기 전에 스토어 값이 업데이트되는 이유를 설명합니다.
비동기 스토어 액션 설계
비동기 액션 가이드를 사용해 loading, data, error state를 더 쉽게 이해하고 추론할 수 있게 만듭니다.
Zustand migration 검토
스토어를 Zustand 4.x에서 5.x로 옮길 때 selector 및 migration notes를 사용합니다.
이 프롬프트를 사용해 보세요
set을 호출한 뒤에도 내 React 컴포넌트가 여전히 이전 Zustand state를 보여주는 이유를 설명해 주세요. 설명은 실용적으로 유지해 주세요.
await 이후 stale closure 문제가 있는지 이 Zustand action을 검토해 주세요. get 또는 getState를 어디에 사용해야 하는지 제안해 주세요.
불필요한 re-render가 있는지 내 Zustand selector를 검토해 주세요. 적절한 경우 multiple selectors, shallow comparison, 또는 useShallow를 추천해 주세요.
이 Zustand store design을 async races, derived state, selector stability, persistence boundaries, test reset strategy 관점에서 감사해 주세요.
모범 사례
- 정확성이 최신 값에 의존할 때는 await 이후 현재 스토어 상태를 읽으세요.
- 실제 반복 작업을 피하기 위해 저장하는 경우가 아니라면 파생 값은 selector에 유지하세요.
- 각 테스트 케이스 전에 스토어 상태를 명시적으로 reset하세요.
피하기
- 스토어 업데이트 직후 React 컴포넌트가 즉시 re-render되었다고 가정하지 마세요.
- shallow comparison 또는 useShallow 없이 새로운 selector 객체를 반환하지 마세요.
- 작은 state slice만 필요한데 전체 스토어를 persist하지 마세요.