디자인 원칙
차크라 UI(Chakra UI)는 컴포넌트를 매우 일관성 있게 유지한다는 원칙에 따라 만들어졌습니다.
우리의 목표는 실제 UI 디자인 문제를 해결하는 간단하고 구성 가능한 컴포넌트를 디자인하는 것입니다. 이를 위해 일련의 원칙을 만들었습니다.
- 스타일 프롭 - 모든 컴포넌트는
css
프롭이나styled()
사용을 줄이기 위해 스타일 프롭으로 재정의하거나 확장할 수 있습니다.Box
에서 새 컴포넌트를 구성합니다. - 간단함 - 컴포넌트 API를 매우 단순하게 유지하고 컴포넌트를 사용하는 실제 시나리오를 보여주도록 노력합니다.
- 합성 - 최소한의 프롭으로 컴포넌트를 분해하여 복잡성을 낮추고 다른 컴포넌트와 함께 구성합니다. 이렇게 하면 스타일과 기능이 유연하고 확장 가능해집니다.
- 접근성 - 컴포넌트를 만들 때 접근성을 가정 먼저 고려합니다. 여기에는 키보드 내비게이션, 초점 관리, 색상 대비, 보이스오버, 올바른
aria-*
속성이 포함됩니다. - 어두운 모드 - 컴포넌트를 어두운 모드와 호환되게 합니다.
useColorMode
훅을 사용해 스타일을 처리합니다. 어두운 모드에서 자세한 내용을 확인하세요. - 프롭의 이름 - 일반적으로 프롭의 이름이 그 역할을 나타냅니다. 불형 프롭은
does
,has
,is
,should
같은 보조 동사를 사용해 이름을 짓습니다. 예를 들어Button
은isDisabled
,isLoading
등을 사용합니다.