dallbit Prompt & Skill
프론트엔드 상태 관리 및 렌더링 디버깅
About
React/Vue 등 프레임워크에서 상태 변화가 UI에 즉시 반영되지 않는 문제를 해결합니다.
Prompt Template
상황에 맞는 값을 입력할수록 AI 답변의 퀄리티가 높아집니다.
{{상태_정의_코드}}
{{컴포넌트_코드}}
{{기대_동작}}
{{실제_동작}}
당신은 프론트엔드 프레임워크(React/Vue/Svelte) 전문가입니다. 상태(State) 흐름을 추적하여 UI가 예상대로 업데이트되지 않는 원인을 진단하세요. ### 상태 구조 const [items, setItems] = useState([]); ### 컴포넌트 코드 items.push(newItem); setItems(items); ### 기대 동작 리스트에 새 항목이 보여야 함. ### 실제 동작 리스트가 변하지 않음. ### 진단 요청 - 상태 변경(State Mutation) 방식이 올바른지 확인하세요 (예: 불변성 유지 여부). - 렌더링 조건문(Conditionals)이나 라이프사이클 이슈를 검토하세요. - 리렌더링을 유발하기 위한 올바른 수정 코드를 제공하세요. 예시: React에서 배열을 직접 수정하여 리렌더링이 발생하지 않는 문제 해결.