You HAVE to know this TypeScript pattern
- 초기 문제점: 단일 인터페이스로
status, error, data 같은 속성을 모두 포함하면, 애플리케이션이 존재해서는 안 되는 '위험한' 또는 '잘못된' 상태를 모델링할 수 있습니다. 🚫
- 위험한 상태의 예시:
error 상태인데 실제 error 속성이 없거나, loading 상태인데 이전 error가 여전히 표시되는 등, 유효하지 않은 상태 조합이 발생할 수 있습니다. ⚠️
- 문제의 본질: 이는 가능한 상태의 '조합적 폭발(combinatorial explosion)'을 야기하여, 실제로는 몇 가지 유효한 상태만 필요한데도 수많은 불필요하고 잘못된 상태를 허용하게 됩니다. 💥
- 해결책: 이 문제를 해결하기 위해 '판별된 유니온(Discriminated Union)' 패턴을 사용해야 합니다. 💡
- 판별된 유니온의 작동 방식: 이는 여러 객체의 유니온 타입으로, 각 객체는 고유한 상태를 나타내며,
status와 같은 공통 속성(판별자, discriminant)을 통해 현재 어떤 상태 브랜치에 있는지 식별합니다. 🏷️
- 예시:
status: 'loading'은 추가 속성 없음, status: 'success'는 data 속성 포함, status: 'error'는 error 속성 포함과 같이 명확하게 분리됩니다. ✅
- 주요 이점: 판별된 유니온을 사용하면 가능한 상태의 수가 '수십 가지'에서 '단 세 가지'와 같이 유효한 최소한의 상태로 줄어들어 타입 안정성이 크게 향상됩니다. 🛡️
- 타입스크립트의 강제성: TypeScript 컴파일러는 판별자를 기반으로 각 상태에 필요한 속성만 허용하거나 강제하여, 잘못된 상태 접근이나 누락을 컴파일 시점에 방지합니다. 🧑💻
- 사용 시점: 여러 개의 선택적(optional) 속성을 가진 상태 객체가 있어 유효하지 않은 상태 조합이 발생할 수 있다고 판단될 때 이 패턴을 적용하는 것이 좋습니다. 🧐
데브허브 | DEVHUB | You HAVE to know this TypeScript pattern