Props를 설계할 때 나누는 기준
컴포넌트를 만들기 전에 Props의 역할부터 구분하면 API가 단순해지고 유지보수가 쉬워집니다.
필수 Props없으면 컴포넌트가 성립하지 않는 값
상태 Propsvalue, checked, open처럼 현재 상태를 나타내는 값
이벤트 PropsonClick, onChange, onClose처럼 사용자 동작 처리
스타일 Propsvariant, size, className처럼 모양을 바꾸는 값
검색 결과가 없습니다.
거의 모든 컴포넌트에서 공통으로 고려할 Props
| Prop | 설명 | 필수 |
|---|
| children | 컴포넌트 내부에 표시할 내용 | 선택 |
| className | 외부에서 CSS 클래스를 추가할 때 사용 | 선택 |
| style | 인라인 스타일 객체 | 선택 |
| id | DOM 식별자와 label 연결 등에 사용 | 선택 |
| disabled | 사용자 입력과 클릭을 막는 비활성 상태 | 선택 |
| onFocus / onBlur | 포커스 진입 및 해제 이벤트 | 선택 |
| onKeyDown | 키보드 조작 이벤트 | 선택 |
| aria-* | 스크린리더 등 접근성 정보 제공 | 선택 |
| data-* | 테스트 식별자나 사용자 정의 데이터 저장 | 선택 |
추천 학습 순서
1. Button2. Input3. Checkbox
4. Radio5. Select6. Textarea
7. Switch8. Badge / Tag9. Modal
10. Tooltip11. Accordion12. Tabs
13. Table14. Pagination