compound component2 Portal과 Compound 패턴으로 Modal 만들기 지난 글에서는 Select 컴포넌트를 Compound Component 패턴으로 관리하는 방법을 소개했다. 이번에는 이 패턴을 Modal 컴포넌트에도 적용해보려고 한다.Modal은 프로젝트 어디에서나 자주 사용된다. 그래서 더더욱 잘 구조화해서 만들어두는 게 중요하다. 이번 글에서는 Portal을 이용하고, Compound Component 패턴을 적용해 Modal을 공통 컴포넌트로 깔끔하게 만드는 방법을 정리해본다.Modal을 만들 때 고려한 기본 원칙은 세 가지였다:Portal을 이용해 Modal을 body 바깥에 띄운다.useModalStore 같은 전역 상태 훅을 사용해 열고 닫을 수 있게 한다.Compound Component 패턴으로 구조를 나눠 자유롭게 조합할 수 있게 한다.왜 Portal을.. 2025. 4. 29. 공통 컴포넌트를 유연하게 설계하는 방법: Compound Component 패턴 적용하기 React에서 여러 기능을 가진 UI를 만들 때, 각각의 역할을 분리하여 조립 가능한 형태로 구성하는 것이 중요합니다. 이때 유용하게 쓸 수 있는 방법이 바로 Compound Component 패턴입니다.이번 글에서는 공통 컴포넌트를 더 유연하고 확장 가능하게 만들기 위해 Compound Component 패턴을 선택한 이유와 장점을 소개하고, 이를 Select 컴포넌트 예시로 구체적으로 풀어보겠습니다.1. 왜 Compound Component 패턴을 선택했을까?기능과 UI를 하나의 컴포넌트에 모두 포함시키면 코드가 비대해지고, 작은 수정이나 새로운 기능 추가에도 전체 구조를 건드려야 해서 유지보수와 확장이 어렵습니다.반면, Compound Component 패턴을 사용하면 다음과 같은 장점이 있습니다... 2025. 4. 29. 이전 1 다음
