shadcnui1 컴파운드 컴포넌트 + Headless UI 톺아보기 컴파운드 컴포넌트 + Headless UI 톺아보기Ant Design을 사용하면서 문득 이런 생각이 들었다.“이 구조… 혹시 컴파운드 컴포넌트 패턴인가?”꼬꼬무로 컴파운드 컴포넌트에 대해 알다보니 자연스럽게 Headless UI까지 연결지어 공부하게 됐다.📍기존 컴포넌트의 방식기존 리액트 컴포넌트는 props로 상태나 기능을 제어한다. {}} />버튼, 상태 표시 등 모든 역할이 하나 컴포넌트에 몰림props로만 제어 → 내부 로직을 모르고는 커스터마이징 어려움→ 해결책: 컴포넌트를 조합하자!!!📍컴파운드 컴포넌트란?여러 개의 컴포넌트를 조합해 하나의 큰 컴포넌트를 만드는 패턴Context로 부모 상태를 자식들과 공유자식 컴포넌트는 각자 역할에 집중유연한 구조 + 재사용성 + 선언적 UI 구성 가능기.. 2025. 6. 1. 이전 1 다음