Headless Component

컴포넌트란

전체 시스템을 구성하는 하나의 부품으로 UI 컴포넌트는 UI를 구성하는 부품으로 볼 수 있다.

컴포넌트를 잘 만드는 방법

• 컴포넌트는 부품으로써 재사용성이 좋아야 한다. (레고 부품을 생각하면 쉬움)

• 재사용성이 좋으려면 하나의 역할과 하나의 관심사를 가져야 한다.

• 데이터를 다루는 로직과 UI 로직은 서로 다른 관심사이므로 분리시켜야 한다.

Headless

• 어떠한 것을 머리와 몸통으로 구분하여 머리는 떼어내고 몸통 부분만 남긴 상태를 의미함

• 머리는 "컨텐츠를 나타내는 방법", 몸통은 "컨텐츠 그 자체"라고 볼 수 있다.

Headless Browser는 브라우저의 컨텐츠를 나타내는 GUI를 표시하지 않고 CLI방식으로 컨텐츠를 확인하고 상호작용하는 방법이다.

Headless Component

UI 컴포넌트에서 컨텐츠를 나타내는 부분(UI) 없이 컨텐츠 기능만 남겨있는 컴포넌트를 의미한다.

• UI에 종속되지 않기 때문에 여러군데에서 재사용이 가능하다.

• UI와 분리되어있기 때문에 다양한 UI 요구사항에 대응하기 쉽다.

• 디자인에 매몰되지 않고 컴포넌트의 역할 및 기능에 집중할 수 있다.