헤드리스 접근 방식을 사용하지 않은 경우의 캘린더 컴포넌트 예시를 보여드리겠습니다. 이 예시에서는 로직과 UI가 하나의 컴포넌트에 밀접하게 결합되어 있습니다.
calendar.tsx
이 비헤드리스 접근 방식의 주요 특징은 다음과 같습니다:
이러한 접근 방식은 간단한 프로젝트에서는 빠르게 구현할 수 있지만, 프로젝트의 규모가 커지거나 요구사항이 변경될 때 유연성이 떨어집니다. 반면 헤드리스 접근 방식은 로직과 UI를 분리함으로써 이러한 문제들을 해결하고, 더 유연하고 유지보수가 용이한 코드를 작성할 수 있게 해줍니다.
먼저, 드래그 앤 드롭 기능을 위한 커스텀 훅을 만들어 보겠습니다:
use-drag-and-drop.ts
이제 이 커스텀 훅을 사용하는 두 가지 다른 UI 컴포넌트를 만들어 보겠습니다:
drag-drop-list.tsx
drag-drop-grid.tsx
이 예시에서 useDragAndDrop 훅은 드래그 앤 드롭 기능의 핵심 로직을 추상화합니다. 이 훅은 아이템 목록 관리, 드래그 시작, 드래그 오버, 드롭 이벤트 처리 등의 기능을 제공합니다.
두 개의 다른 UI 컴포넌트 (DragDropList와 DragDropGrid)는 동일한 useDragAndDrop 훅을 사용하지만, 완전히 다른 레이아웃과 스타일로 아이템을 표시합니다. 이는 상호작용 로직과 UI를 분리함으로써 얻을 수 있는 유연성과 재사용성을 잘 보여줍니다.
이러한 접근 방식의 장점은 다음과 같습니다:
useDragAndDrop 훅만 수정하면 됩니다.이러한 상호작용 추상화 패턴을 사용하면, 복잡한 상호작용 로직을 여러 컴포넌트에서 쉽게 재사용하고 유지보수할 수 있습니다.