Ant Design2 UI 컴포넌트 라이브러리 비교(feat. Ant Design, HeadlessUI) UI 컴포넌트 라이브러리 비교[🔥React 뽀개기] - 컴파운드 컴포넌트 + Headless UI 톺아보기 컴파운드 컴포넌트 + Headless UI 톺아보기컴파운드 컴포넌트 + Headless UI 톺아보기Ant Design을 사용하면서 문득 이런 생각이 들었다.“이 구조… 혹시 컴파운드 컴포넌트 패턴인가?”꼬꼬무로 컴파운드 컴포넌트에 대해 알다보니 자연스럽bori-note.tistory.com 지난글에서 컴파운드 컴포넌트 패턴에 대해 정리했었는데, 이번에는 그와 자주 비교되는 방식인 Headless UI 스타일 컴포넌트를 직접 구현해보며 차이를 느껴봤다. 두 패턴 모두 재사용성과 유연성 측면에서 장점이 있지만, 실제로 써보니 구현 방식이나 사용하는 입장에서 느껴지는 차이가 꽤 뚜렷했다. 이번 글에서.. 2025. 6. 1. 컴파운드 컴포넌트 + Headless UI 톺아보기 컴파운드 컴포넌트 + Headless UI 톺아보기Ant Design을 사용하면서 문득 이런 생각이 들었다.“이 구조… 혹시 컴파운드 컴포넌트 패턴인가?”꼬꼬무로 컴파운드 컴포넌트에 대해 알다보니 자연스럽게 Headless UI까지 연결지어 공부하게 됐다.📍기존 컴포넌트의 방식기존 리액트 컴포넌트는 props로 상태나 기능을 제어한다. {}} />버튼, 상태 표시 등 모든 역할이 하나 컴포넌트에 몰림props로만 제어 → 내부 로직을 모르고는 커스터마이징 어려움→ 해결책: 컴포넌트를 조합하자!!!📍컴파운드 컴포넌트란?여러 개의 컴포넌트를 조합해 하나의 큰 컴포넌트를 만드는 패턴Context로 부모 상태를 자식들과 공유자식 컴포넌트는 각자 역할에 집중유연한 구조 + 재사용성 + 선언적 UI 구성 가능기.. 2025. 6. 1. 이전 1 다음
