컴포넌트 패턴
SLUR UI System에서 컴포넌트(Component)는
여러 페이지에서 재사용될 수 있는 독립적인 UI 단위입니다.
컴포넌트 패턴은 기능 구현이 아니라,
구조 책임과 재사용 범위를 명확히 하기 위한 설계 기준입니다.
컴포넌트의 역할
Section titled “컴포넌트의 역할”컴포넌트는 다음 역할만을 담당합니다.
- 명확한 하나의 기능 또는 목적 수행
- 내부 구조와 상태 관리
- 다양한 환경에서 재사용 가능
컴포넌트는
페이지 흐름이나 전역 구조를 알지 못합니다.
컴포넌트 설계의 기본 원칙
Section titled “컴포넌트 설계의 기본 원칙”컴포넌트는 다음 원칙을 따릅니다.
- 하나의 책임만 가집니다.
- 독립적으로 동작할 수 있어야 합니다.
- 내부 구조는 내부 요소(i_)로 표현합니다.
- 상태 변화는 수정자(m_) 또는 데이터 속성으로 표현합니다.
컴포넌트는
작을수록 재사용성이 높아집니다.
컴포넌트와 다른 구조의 관계
Section titled “컴포넌트와 다른 구조의 관계”컴포넌트는
다른 구조 단위와 다음 관계를 가집니다.
- 페이지 안에 배치될 수 있습니다.
- 레이아웃 안에 배치될 수 있습니다.
- 다른 컴포넌트 내부에 중첩되지 않습니다.
컴포넌트 간 중첩은
구조 범위 충돌을 유발하므로 허용하지 않습니다.
컴포넌트 내부 구조 기준
Section titled “컴포넌트 내부 구조 기준”컴포넌트 내부 구조는 다음 기준을 따릅니다.
- 내부 요소는 컴포넌트에 종속됩니다.
- 컴포넌트 내부에 페이지/레이아웃 구조를 포함하지 않습니다.
- 구조 복잡도는 내부 요소 분리로 해결합니다.
내부 구조가 복잡해질수록
컴포넌트 분리가 필요할 수 있습니다.
컴포넌트 설계 시 판단 기준
Section titled “컴포넌트 설계 시 판단 기준”컴포넌트를 설계할 때는 다음을 점검합니다.
- 다른 페이지에서도 사용할 수 있는가
- 페이지 전용 구조를 포함하고 있지는 않은가
- 상태와 구조가 명확히 분리되어 있는가
- 컴포넌트 하나가 여러 역할을 수행하지 않는가
컴포넌트가 커질수록
설계 책임을 다시 검토해야 합니다.
컴포넌트 패턴의 목적
Section titled “컴포넌트 패턴의 목적”컴포넌트 패턴은
UI 재사용성을 높이고,
페이지 구조를 단순하게 유지하기 위한 기준입니다.
컴포넌트의 책임이 명확할수록
UI 구조는 더 안정적이고 확장 가능해집니다.