적절한 로딩 상태, 오류 처리 및 사용자 피드백과 함께 React 컴포넌트를 구축하는 것은 어렵고 종종 혼란스러운 UX를 초래합니다. 이 스킬은 비동기 작업 처리, 적절한 피드백 표시 및 부드러운 사용자 경험 생성을 위한 검증된 UI 패턴을 제공합니다.
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「react-ui-patterns」。 데이터를 다시 가져올 때 플래시 없이 로딩 상태를 어떻게 표시하나요?
預期結果:
패턴 사용: 데이터가 존재할 때만 로딩 인디케이터를 표시합니다. 이렇게 하면 캐시된 데이터를 사용할 수 있을 때 플래시가 방지됩니다. 예: if (loading && !data) return <Skeleton />;
正在使用「react-ui-patterns」。 React에서 오류를 처리하는 올바른 방법은 무엇인가요?
預期結果:
항상 명확한 메시지와 함께 사용자에게 오류를 표시하세요. 계층 구조 사용: 폼의 인라인 오류, 복구 가능한 오류의 토스트, 페이지 수준 문제의 배너, 복구 불가능한 실패의 전체 오류 화면.
正在使用「react-ui-patterns」。 폼 제출 중 버튼 상태를 어떻게 처리해야 하나요?
預期結果:
제출 중 버튼을 비활성화하고 로딩 인디케이터를 표시하세요. 이렇게 하면 중복 제출이 방지되고 사용자에게 작업이 진행 중임을 피드백으로 알려줍니다.
安全審計
安全Static analysis flagged 33 potential issues (external_commands, weak_crypto, system_reconnaissance), but manual review confirms all are false positives. The backticks detected are TypeScript template literals in code examples, not shell commands. No cryptographic code or system reconnaissance tools exist. This is a pure documentation skill containing only React UI pattern examples with no executable code, network calls, or file system access.
品質評分
你能建構什麼
데이터 기반 React 컴포넌트 구축
API에서 데이터를 가져오는 컴포트를 만들 때 확립된 패턴에 따라 적절한 로딩, 오류 및 빈 상태를 적용합니다.
폼 제출 처리
비동기 제출이 있는 폼을 구현할 때 제출 중 버튼을 비활성화하고 적절한 로딩 피드백을 표시합니다.
사용자 경험 개선
기존 React 코드를 리팩터링하여 혼란스러운 로딩 플래시 및 숨겨진 오류를 제거합니다.
試試這些提示
데이터를 가져오는 React 컴포넌트의 로딩 상태를 구현하는 방법을 보여주세요. 캐시된 데이터가 이미 존재할 때 스피너를 표시하고 싶지 않습니다.
오류 메시지를 표시하고 재시도 버튼을 포함하는 React 오류 상태 컴포넌트를 만드세요. 이것을 Apollo 또는 React Query와 어떻게 통합해야 하나요?
변형 중送信 버튼을 비활성화하고 로딩 스피너를 표시하며 성공 또는 오류 토스트를 표시하는 React 폼 제출 패턴을 작성하세요.
모든 UI 상태를 처리하는 완전한 React 컴포넌트를 구축하세요: 로딩(스켈레톤 포함), 오류(재시도 포함), 빈 상태(액션 포함), 성공(데이터 표시 포함).
最佳實務
- 오래된 UI를 표시하지 마세요 - 로딩 스피너는 표시할 데이터가 없을 때만 나타납니다
- 항상 사용자에게 오류를 표시하세요 - 피드백 없이 오류를 조용히吞并하지 마세요
- 비동기 작업 중 버튼을 비활성화하여 중복 제출을 방지하세요
避免
- 캐시된 데이터가 존재하는지 여부와 관계없이 로딩이 true일 때마다 로딩 스피너 표시
- 오류를catch하고 콘솔에만 로깅하여 사용자 피드백 없이 표시
- 폼 제출 중 사용자가 여러 번 제출 버튼을 클릭할 수 있도록 허용