The cleanest way to type React props
- React 컴포넌트에 props를 전달할 때, 컴포넌트가 필요한 특정 필드만 있음에도 불구하고 전체 객체를 전달하면 '강한 결합(tight coupling)' 문제가 발생합니다. 🔗
- 이로 인해 해당 컴포넌트는 전체 객체가 사용 가능한 환경에서만 재사용될 수 있어 유연성이 떨어지고 재사용성이 제한됩니다. 🚫
- 많은 개발자들이 이 문제를 해결하기 위해 컴포넌트별로 별도의 props 타입을 직접 작성하지만, 이는 최적의 방법이 아닙니다. ✍️
- React 및 TypeScript 환경에서 props를 타이핑하는 가장 좋은 방법은 TypeScript의
Pick 유틸리티 타입을 사용하는 것입니다. 🛠️
Pick을 사용하면 컴포넌트의 props가 원본 타입과 동기화 상태를 유지하며, 나중에 더 많은 필드가 필요할 경우 쉽게 추가할 수 있어 명확하고 확장성이 뛰어납니다. ✨
- 이처럼 명확하고 정확하며 확장 가능한 코드를 작성하는 것은 시니어 개발자처럼 코딩하는 명확한 신호입니다. 🚀