Compound Component Pattern

Compound Component

JDesignSystem은 복잡한 사용자 인터페이스를 위한 높은 수준의 추상화를 제공하는 Compound Component 패턴을 채택하였습니다.

다른 디자인시스템 둘러보기

많은 디자인시스템들이 그들만의 코드 인터페이스 컨셉을 보유하고 있습니다. JDesignSystem 역시 이러한 점을 고려하여, 우리만의 컴포넌트 인터페이스의 컨셉을 채택해 이 컨셉을 기반으로 여러 컴포넌트들을 생성해 나갔습니다.

우선 다른 디자인시스템들에서 보여지는 Button 컴포넌트의 인터페이스 예시를 살펴보겠습니다:

<Button
  icon={<Icon type="gear" />}
  label="Customize"
/>

<Button icon="gear">
  Customize
</Button>

<Button>
  Customize
  <ButtonIcon type="gear" /> 
</Button>

<Button>
  Customize
  <Button.Icon type="gear" /> 
</Button>

각각의 코드 인터페이스들을 분석하면, 각각이 다음과 같은 특징을 가지고 있음을 알 수 있었습니다:

1. 컴포넌트의 모든 정보를 props로 관리하는 방식
2. optional하게 추가로 사용될 것만 property로 넘기는 방식
3. 분리 가능한 요소는 새로운 컴포넌트로 생성
4. 분리 가능한 요소를 새로운 컴포넌트로 생성하되, 컴포넌트 내부의 계층 구조를 나타내기 위해 Dot Notation 방식 사용

으로 나눌 수 있었습니다.

왜 Compound Component 패턴인가요?

팀 내 평가 결과, Dot Notation을 사용한 Compound Component 형태의 4번 인터페이스가 가장 컴포넌트 지향적이며, 코드의 구조를 직관적으로 이해하기 쉽다는 결론에 도달 했습니다.

Compound Component 패턴은 우리가 사용자에게 더 직관적인 인터페이스를 제공하면서도 컴포넌트 계층 구조를 쉽게 알 수 있게 해줍니다. 또한, 이는 각 컴포넌트가 개별적으로 분리되어 존재하면서도, 다른 컴포넌트들과 자연스럽게 상호작용할 수 있게 해줍니다.

내부 동작 방식

Compound Component 패턴은 React의 Context API와 같은 메커니즘을 통해, 상위 컴포넌트가 하위 컴포넌트들에게 상태나 메서드를 암묵적으로 공유하도록 만듭니다. 이렇게 함으로써 각 컴포넌트는 자신의 역할에만 집중하면서도 필요한 정보나 기능에 접근할 수 있게 되어, 코드의 가독성과 유지보수성이 향상됩니다.

JDesignSystem은 이런 Compound Component 패턴을 적용하여, 각 컴포넌트의 독립성을 유지하면서도 사용자에게 직관적이고 유연한 인터페이스를 제공합니다. 이로 인해 유연한 UI를 손쉽게 구축할 수 있게됩니다.