소프트웨어 개발에서 재사용이 가능한 컴포넌트를 만들기 위해 여러 개의 다른 컴포넌트를 조합하는 디자인 패턴이다. 복합적인 기능을 가진 큰 컴포넌트를 작은 단위의 컴포넌트로 구성함으로써 코드의 유지보수성과 확장성을 높일 수 있다.
함성 컴포넌트 패턴에서는 컴포넌트들이 계층 구조로 구성된다. 각 컴포넌트는 하위 컴포넌트를 가지며, 최상위 컴포넌트는 하위 컴포넌트들의 조합으로 이루어진다. 이로 인해 단일 컴포넌트를 사용하는 것보다 더 복잡하고 다양한 기능을 제공할 수 있다.
예를 들어, 그래픽 사용자 인터페이스(GUI)를 개발하는 경우, 버튼, 텍스트 상자, 체크박스 등의 작은 컴포넌트들을 만들어두고, 이러한 작은 컴포넌트들을 조합하여 더 큰 형태의 윈도우 또는 팝업 컴포넌트를 만들 수 있다. 이렇게 함으로써 유사한 기능을 가진 컴포넌트들을 중복으로 작성할 필요 없이 재사용성이 증가하고 코드의 가독성이 높아진다.
요약하자면, 하나의 컴포넌트를 여러 가지 집합체로 분리한 뒤, 분리된 각 컴포넌트를 사용하는 쪽에서 조합해 사용하는 컴포넌트 패턴을 의미한다.
UI와 로직을 분리하는 것은 소프트웨어 개발에서 중요한 원칙 중 하나인 단일 책임 원칙을 따르기 위한 접근 방법이다. 합성 컴포넌트 패턴은 이를 구현하는 데 도움이 되며, 이를 통해 컴포넌트들 간의 의존성을 줄이고 독립성을 강화할 수 있다.
합성 컴포넌트는 여러 작은 컴포넌트들로 구성된다. 각 작은 컴포넌트는 UI에 대한 표현을 담당한다. 예를 들어, 버튼, 텍스트, 이미지 등을 담당하는 작은 컴포넌트들이 UI구성을 형성한다.
이렇게 구성된 작은 컴포넌트들은 다른 컴포넌트에서 재사용이 가능하다. UI를 구성하는 작은 단위들로 나누어 작성하므로, 코드의 가독성과 재사용성이 높아진다.
합성 컴포넌트는 작은 컴포넌트들을 조합하여 더 큰 컴포넌트를 형성하는데 사용된다. 이 때 작은 컴포넌트의 로직이 분리된다. 예를 들어, 작은 컴포넌트들은 데이터를 가지고 있지 않으며, 데이터는 부모 컴포넌트에서 받아온다.
작은 컴포넌트들은 상태(state)를 가지지 않으며, 주로 부모 컴포넌트에서 전달받은 프로퍼티(props)에 따라 UI를 렌더링한다. 이로 인해 컴포넌트 간의 결합도가 낮아지고 관리가 용이해진다.