Headless

Headless UI Component

컴포넌트의 스타일과 기능을 분리해서 설계하는 방식

• 스타일과 기능은 서로 다른 관심사이기 떄문에 분리하는것이 유지보수와 확장성 측면에서 유리함

  • 스타일과 기능이 한 컴포넌트에 얽혀 있으면, 서로 영향을 주는 경우가 생기기 쉬움

  • 스타일은 자주 바뀌고, 다양한 케이스를 고려해야 해서 기능과 함께 엮여 있으면 수정이나 확장이 어렵고 복잡해짐

  • 두 관심사가 뒤섞이면 코드의 가독성도 떨어지고, 변경 시 의도치 않은 사이드 이펙트를 유발할 수 있음

• 기능이 단순한 아토믹 컴포넌트라도, 접근성이나 세세한 동작까지 제대로 구현하려면 필연적으로 일정 수준의 보일러플레이트 코드가 생기게 됨

• 스타일이 다르더라도 근본적인 기능은 동일한 경우가 많음, 기능만 분리해두면 다양한 스타일 요구사항에 유연하게 대응 가능

• 인터페이스와 기능이 변경되는 경우 일괄적으로 반영 가능

• 비슷한 컴포넌트에서 재사용 가능해짐 (버튼 -> 버튼, 토글, 스위치)

구현 방식

Hooks

• 기능을 Hooks로 분리해서 관심사 분리

Compound

하나의 동작을 수행하는 복잡한 UI를, 역할에 맞는 여러 개의 작은 컴포넌트로 나누고 외부에서 유연하게 조합하고 제어할 수 있도록 만든 패턴

• Compound Component Pattern

• 내부적으로는 Context API를 활용해 상태와 로직을 공유

• 사용하는곳에서 각 역할에 맞는 컴포넌트에 필요한 props만 전달하면 되기 때문에, 코드의 가독성과 명확성이 높아짐

Render prop (Function as Child)

prop으로 React.JSX 요소를 반환하는 함수를 전달해서 렌더링을 사용자에게 맡기는 방식

// 부모
return (
  <Toggle>
    {( isSelected, toggle ) => (
      <Button onClick={toggle}>
        { isSelected ? 'on' : 'off' }
      </Button>
    )}
  </Toggle>
)

// 자식
return (
  <Toggle>
    ...
    { props.children({isSelected, toggle}) }
  </Toggle>
)

• render props pattern

• render prop 함수에 값을 인자로 전달하면, 부모 컴포넌트는 해당 값을 기반으로 렌더링을 제어할 수 있음

• 권한에 따라 서로 다른 UI를 보여줘야할 때 처럼, 조건에 따라 분기 렌더링이 필요한 상황에 유용