🪵 6. 좋은 컴포넌트란 무엇인가? Headless Pattern

프론트엔드 개발에서 마주하는 핵심 과제

프론트엔드 개발에서는 다양한 핵심 과제들이 존재합니다.

1. 재사용 가능하면서도 유연한 컴포넌트 설계
   • 변경되는 요구사항에 대응
   • 다양한 상황에서의 재사용성
   • 확장 가능하고 유지보수 가능한 구조
2. 일관된 디자인 시스템의 효율적 구현
   • 일관된 사용자 경험 제공
   • 개발 생산성 향상
   • 유지보수 용이성
3. 효과적인 팀 협업과 문서화
   • 코드 품질 유지
   • 효율적인 의사소통

이러한 과제들을 해결하기 위해 Headless Pattern, Tailwind CSS, Storybook을 채택했습니다. 이를 효과적으로 사용하기 위해서는 먼저 "좋은 컴포넌트"가 무엇인지 이해하는 것이 중요합니다.

좋은 컴포넌트의 조건: 응집도와 결합도

1. 높은 응집도 (High Cohesion)

• 단일 책임 원칙: 컴포넌트는 하나의 명확한 역할에 집중해야 합니다.
• 의미 있는 네이밍: 컴포넌트 이름은 그 역할과 목적을 명확히 나타내야 합니다.
• 명확한 인터페이스: 잘 정의된 props와 이벤트

// 높은 응집도를 가진 컴포넌트 예시
interface SearchInputProps {
  value: string;
  onChange: (value: string) => void;
  onSubmit: () => void;
}

const SearchInput: React.FC<SearchInputProps> = ({ value, onChange, onSubmit }) => {
  // 검색 입력에 관련된 로직만 포함
  return (
    <form onSubmit={onSubmit}>
      <input
        type="search"
        value={value}
        onChange={e => onChange(e.target.value)}
      />
    </form>
  );
};

2. 낮은 결합도 (Low Coupling)

• 독립적 동작: 다른 컴포넌트에 의존하지 않고 독립적으로 동작해야 합니다.
• 유연한 합성: 다양한 상황에서 조합할 수 있어야 하며, 독립적인 수정과 확장이 가능해야 합니다.
• 제어의 역전: 주요 결정권을 외부로 위임하여 재사용성을 높입니다.

// 낮은 결합도를 가진 컴포넌트 예시
const Card: React.FC<{
  renderHeader?: () => React.ReactNode;
  renderFooter?: () => React.ReactNode;
  children: React.ReactNode;
}> = ({ renderHeader, renderFooter, children }) => {
  return (
    <div className="card">
      {renderHeader && <div className="card-header">{renderHeader()}</div>}
      <div className="card-body">{children}</div>
      {renderFooter && <div className="card-footer">{renderFooter()}</div>}
    </div>
  );
};

높은 응집도와 낮은 결합도라는 두 가지 원칙을 효과적으로 실현하는 방법 중 하나가 바로 Headless Pattern입니다.

Headless Pattern(Component)

Headless Component란?

Headless Component는 “머리 없는” 컴포넌트를 의미합니다. 여기서 “머리(head)”는 사용자에게 보여지는 UI를 의미합니다. 즉, Headless Component는 UI 렌더링 책임을 분리하고, 순수하게 로직과 상태 관리에만 집중하는 컴포넌트입니다. 이러한 Headless Component에서는 UI를 외부에 위임하게 됩니다.

UI와 로직을 분리함으로써 UI는 재사용 가능해지고, 로직은 다른 컴포넌트와 쉽게 공유할 수 있게 됩니다.”

// 로직과 상태 관리를 담당하는 hook
const useDropdown = () => {
  const [isOpen, setIsOpen] = useState(false);
  const toggle = useCallback(() => setIsOpen(prev => !prev), []);
  return {
    isOpen,
    toggle
  };
};

// Headless Component 패턴으로 설계된 Dropdown 컴포넌트
const Dropdown: React.FC<DropdownProps> = ({ children }) => {
  // useDropdown 훅에서 드롭다운 상태와 토글 기능을 가져옴
  const dropdownProps = useDropdown();
  // children 함수에 dropdownProps를 전달하여 자식 컴포넌트가 상태를 제어하도록 함
  return <>{children(dropdownProps)}</>;
};

// 실제 사용 예시
const MyDropdown = () => {
  return (
    <Dropdown>
      {({ isOpen, toggle }) => (
        <div>
          <button onClick={toggle}>메뉴</button>
          {isOpen && (
            <div>
              <div>옵션 1</div>
              <div>옵션 2</div>
            </div>
          )}
        </div>
      )}
    </Dropdown>
  );
};

이러한 패턴은 Input, Button 등 다양한 컴포넌트에도 적용할 수 있습니다.

장점

• UI와 로직의 명확한 분리: 로직과 UI를 분리함으로써 코드가 깔끔하고 유지보수가 쉬워집니다.
• 재사용성 향상: 로직은 다양한 UI 컴포넌트에서 재사용할 수 있습니다.
• 테스트 용이성: UI와 로직이 분리되어 테스트가 용이합니다.
• 변경에 대한 유연성: UI 변경이 로직에 영향을 미치지 않으므로 UI 변경이 더 유연하고 안전합니다.

단점과 고려사항

• 복잡성 증가: UI와 로직을 분리하다 보면 처음에는 구조가 복잡해질 수 있습니다.
• 오버엔지니어링 위험: 간단한 기능에 대해 과도한 추상화가 이루어질 수 있습니다.
• 학습 곡선: 새로운 개발자는 이 패턴을 이해하는 데 시간이 걸릴 수 있습니다.

따라서, Headless Pattern은 복잡한 UI와 자주 변경되는 로직이 있는 상황에서 특히 유용하며, 간단한 컴포넌트나 상태 관리에는 오히려 복잡성을 증가시킬 수 있습니다.

결론

Headless Pattern은 소프트웨어 변경에 유연하게 대응할 수 있는 매우 효과적인 패턴입니다. 이 패턴은 소프트웨어 엔지니어링의 기본 원칙인 높은 응집도와 낮은 결합도를 자연스럽게 달성할 수 있게 도와줍니다. 특히 UI/UX가 자주 변경되는 현대 웹 애플리케이션 개발에 적합합니다.

하지만, 모든 상황에서 이상적인 해결책은 아닙니다. 재사용성이 낮거나, 상태 관리가 간단한 경우에는 불필요한 복잡성을 초래할 수 있으며, 과도한 추상화나 오버엔지니어링의 위험이 존재합니다. 또한 Hook 설계에 대한 이해와 학습이 필요하고, UI와 로직의 결합도에 따라 한계가 있을 수 있습니다.

따라서, 이 패턴은 그 유용성을 잘 이해하고, 적절한 상황에서 사용하면 매우 강력한 도구가 될 수 있습니다.

참고 자료

(번역) 헤드리스 컴포넌트: 리액트 UI를 합성하기 위한 패턴