-
-
Notifications
You must be signed in to change notification settings - Fork 3
[draft] Primitive vs Wrapper: Label에서 시작된 컴포넌트 설계 고민 #976
-
아직 수정중입니다. 리뷰는 추후에 요청하겠습니다.처음에는 Label을 form 컴포넌트들(TextInput 등)에 포함해야하는가에 대해서 논의하게 되었습니다. 논의의 시작Label 포함 전략 비교
제안
Group 만 Label 포함현재 구조이며 RadioGroup, CheckboxGroup에서만 Label이 포함되고 TextInput등은 포함되지 않습니다. <TextInput placeholder="검색어를 입력하세요..." /> <RadioGroup label="세로 방향 (Vertical)" defaultValue="apple" > <Radio value="apple">사과</Radio> <Radio value="banana">바나나</Radio> <Radio value="orange">오렌지</Radio> </RadioGroup> 모든 컴포넌트에서 label 제거, FormField로 조합<FormField> <FormField.Label>이름</FormField.Label> <FormField.Control> <Input /> </FormField.Control> <FormField.Description> daleui 에서 사용할 이름을 입력해주세요. </FormField.Description> <FormField.ErrorMessage> 이름은 50자를 넘길 수 없습니다. </FormField.ErrorMessage> </FormField> 모든 컴포넌트에 label 포함<TextInputField label="이메일" description="설명을 입력하세요" errorMessage="에러입니다" /> FormField 기반 + TextField 등 wrapper 제공// primitive <FormField> <FormField.Label>이름</FormField.Label> <FormField.Control> <Input /> </FormField.Control> <FormField.Description> daleui 에서 사용할 이름을 입력해주세요. </FormField.Description> <FormField.ErrorMessage> 이름은 50자를 넘길 수 없습니다. </FormField.ErrorMessage> </FormField> // Wrapper <TextInputField label="이메일" description="설명을 입력하세요" errorMessage="에러입니다" /> 4번을 최종으로 제안했습니다. FormField를 통해 label / description / error를 일관되게 관리하고, 새로운 의견윤섭님이 MUI, Mantine, React Spectrum, Carbon 등 다양한 라이브러리 들을 비교해서 Label이 포함된 형태로 제공되고있다고 알려주셨고 제가 생각하기에는
처럼 파생 네이밍이 생기게 되고, 이게 오히려 API 복잡도를 높일 수 있다고 생각했습니다. 또한 Label을 포함할 경우 컴포넌트에 책임이 너무 커지지 않을까 우려했습니다. 관점에 전환처음에는 좋은 컴포넌트, 책임분리 이런 부분만 집중하다보니 놓쳤습니다. |
Beta Was this translation helpful? Give feedback.