[ts+react+tailwind CSS] html 태그 컴포넌트 만들기
·
Study/Type Script
TS를 사용해서 React 입력 컴포넌트의 Props 타입을 제한하고, Tailwind CSS 클래스를 호율적으로 병합하기 위한 유틸리티를 포함하는 방법에 대해서 정리하고자 한다. 위한 유틸리티를 포함하는 방법에 대해서 정리하고자 한다.1️⃣ input 컴포넌트로 만들기Input 태그를 커스텀으로 만들기 위해서 안에 어떠한 타입들이 들어가는지 확인해보자타입 강제 : OnlyLiteralsType OnlyLiterals = T extends string ? string extends T ? never : T :never Input에 제대로 된 타입을 주기 위해서 제네릭 T로 구체적인 문자열 리터럴(ex. “text”, “password”)인지 확인한다.삼항연산자에 의해T가 단순히 string 타입 전체..