技能 fp-ts-react
📦

fp-ts-react

安全

fp-ts 패턴으로 타입 안전 React 앱 구축하기

React에서 상태, 오류 및 비동기 작업을 관리하면 종종 null 값이나 처리되지 않은 실패로 인한 버그가 발생합니다. 이 스킬은 타입 안전 상태 관리, 오류 누적 폼 검증, 신뢰할 수 있는 비동기 데이터 가져오기를 위한 실용적인 fp-ts 패턴을 제공합니다.

支援: Claude Codex Code(CC)
🥉 74 青銅
1

下載技能 ZIP

2

在 Claude 中上傳

前往 設定 → 功能 → 技能 → 上傳技能

3

開啟並開始使用

測試它

正在使用「fp-ts-react」。 사용자가 잘못된 이메일과 짧은 비밀번호로 회원가입 폼을 제출합니다

預期結果:

  • 폼에 두 개의 오류 메시지가 함께 표시됩니다:
  • - 잘못된 이메일 주소
  • - 비밀번호는 최소 8자 이상이어야 합니다
  • 모든 검증이 통과할 때까지 폼 데이터가 제출되지 않습니다

正在使用「fp-ts-react」。 대시보드 컴포넌트가 사용자 프로필, 통계, 알림을 병렬로 가져옵니다

預期結果:

  • 초기 상태에 로딩 스피너가 표시됩니다
  • 세 가지 API 요청이 동시에 실행됩니다
  • 성공 상태에 사용자 정보, 메트릭, 알림 목록이 포함된 완전한 대시보드가 표시됩니다
  • 요청 중 하나라도 실패하면 재시도 옵션과 함께 오류 상태가 표시됩니다

安全審計

安全
v1 • 2/25/2026

All 91 static analysis findings are false positives. The SKILL.md file is documentation containing TypeScript code examples in markdown format. Detected 'external_commands' are markdown backtick code blocks, not shell execution. Network findings reference example URLs in documentation. No executable code or actual security risks present.

1
已掃描檔案
797
分析行數
0
發現項
1
審計總數
未發現安全問題
審計者: claude

品質評分

38
架構
100
可維護性
87
內容
50
社群
100
安全
91
規範符合性

你能建構什麼

오류 수집이 포함된 폼 검증

한 번에 하나씩 보여주는 대신 모든 필드 오류를 한 번에 표시하는 회원가입 폼을 검증합니다.Applicative 검증을 사용하여 이메일, 비밀번호, 이름 필드의 오류를 동시에 수집합니다.

적절한 상태 처리가 포함된 API 데이터 가져오기

boolean 플래그(isLoading, isError, data)를 RemoteData 타입으로 대체하여 정확히 네 가지 상태(NotAsked, Loading, Failure, Success)를 강제합니다. 불가능한 상태 조합을 제거합니다.

타입 안전 선택적 사용자 데이터

null 검사를 대신하여 Option 타입을 사용하여 로그인/로그아웃 UI 상태를 처리합니다. undefined 가드 절 없이 더 깔끔한 조건부 렌더링을 위해 사용자 존재 여부에 대해 패턴 매칭합니다.

試試這些提示

欠損값에 대한 기본 Option 패턴 
아직 로드되지 않았을 수 있는 사용자 프로필을 처리하기 위해 React에서 fp-ts Option 타입을 사용하는 방법을 보여주세요. useState 훅과 O.match를 사용한 패턴 매칭을 포함하여 다양한 UI 상태를 렌더링하세요.
모든 오류를 수집하는 폼 검증 
fp-ts Either를 사용하여 한 번에 모든 검증 오류를 표시하는 회원가입 폼 검증을 생성하세요. 이메일 형식, 비밀번호 길이(8자 이상), 필수 이름 필드를 검증하세요. 검증자를 결합하려면 sequenceS를 사용하세요.
API 호출을 위한 TaskEither가 포함된 커스텀 훅 
fetch API를 래핑하는 fp-ts TaskEither를 사용하여 useFetch 커스텀 훅을 작성하세요. HTTP 오류, 로딩 상태를 처리하고 타입 안전 결과를 제공하세요. flatMap으로 여러 API 호출을 체이닝하는 방법을 보여주세요.
복잡한 비동기 UI를 위한 RemoteData 상태 머신 
네 가지 상태(NotAsked, Loading, Failure, Success)를 가진 React용 RemoteData 패턴을 구현하세요. 모든 상태를 패턴 매칭하기 위한 fold 함수를 만들고 마운트 시 데이터를 가져오는 완전한 UserProfile 컴포넌트를 보여주세요.

最佳實務

  • 새 참조를 각 렌더링마다 생성하는 O.some()과 같은 fp-ts 값을 생성할 때 불필요한 리렌더링을 방지하려면 useMemo를 사용하세요
  • 불가능한 상태 조합을 타입 레벨에서 제거하려면 별도의 로딩/오류/data boolean 대신 RemoteData를 선호하세요
  • 첫 번째 오류에서 실패하는 대신 모든 필드 오류를 표시하려면 폼에 applicative 검증(sequenceS)과 Either를 사용하세요

避免

  • fp-ts Option Either TaskEither를 메모이제이션 없이 React 의존성 배열 값으로 직접 사용하지 마세요 - 렌더링마다 새 참조를 생성합니다
  • 동일한 코드베이스에서 null undefined 검사와 Option을 혼합하지 마세요 - 일관성을 위해 fp-ts 패턴에 완전히 충실하세요
  • 동기 작업에 TaskEither를 사용하지 마세요 - 실패할 수 있는 비동기 작업에 사용하고, 동기 검증에는 Either를 사용하세요

常見問題

fp-ts란 무엇이며 React와 함께 사용하는 이유는 무엇인가요?
fp-ts는 TypeScript용 함수형 프로그래밍 라이브러리로, Option(欠損값용), Either(오류용), TaskEither(비동기 작업용)와 같은 타입을 제공합니다. 일반적인 React 패턴에 타입 안전성을 가져와서 런타임 대신 컴파일 타임에 버그를 잡습니다.
React 프로젝트에 fp-ts 학습 곡선이 가치 있나요?
TypeScript와 함수형 프로그래밍에 익숙한 팀의 경우, fp-ts가 런타임 오류를 줄이고 코드 명확성을 향상시킵니다. 간단한 프로젝트의 경우 추가 복잡성이 정당화되지 않을 수 있습니다. TaskEither와 ReaderTaskEither를 채택하기 전에 Option과 Either부터 시작하세요.
RemoteData는 로딩 및 오류 플래그가 있는 useState를 어떻게 개선하나요?
RemoteData는 정확히 네 가지 유효한 상태(NotAsked, Loading, Failure, Success)를 구분된 유니온으로 인코딩합니다. 이는 별도의 boolean 플래그를 사용할 때 가능한 loading=true와 error 설정 같은 불가능한 상태를 방지합니다.
React Server Component와 함께 fp-ts 패턴을 사용할 수 있나요?
네. Option Either及其他 동기 fp-ts 타입은 Server Component에서 잘 작동합니다. TaskEither는 RSC가 비동기를 다르게 처리하기 때문에 덜 관련성이 있지만, Either를 사용한 검증 패턴은 폼 처리에서 여전히 유용합니다.
권장되는 fp-ts React 훅 라이브러리는 무엇인가요?
fp-ts 이해관계가 있는 참조적으로 안정적인 훅을 위해 fp-ts-react-stable-hooks를 사용하세요. 이렇게 하면 fp-ts 값을 의존성으로 사용할 때 불필요한 리렌더링이 방지됩니다. RemoteData의 경우 @devexperts/remote-data-ts가 유틸리티와 함께 타입을 제공합니다.
React에서 fp-ts로 의존성 주입을 어떻게 처리하나요?
React Context를 ReaderTaskEither와 결합하세요. 서비스(API, 분석 등)가 있는 AppDependencies 인터페이스를 정의하고 Context를 통해 제공하고,ReaderTaskEither를 사용하여 이러한 서비스에 의존하는 작업을 구성하면서 컴포넌트를 테스트 가능하게 유지하세요.

開發者詳情

作者

sickn33

授權

MIT

儲存庫

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/fp-ts-react

引用

main

檔案結構

📄 SKILL.md