서브(자식) 컴포넌트들이 메인(부모) 컴포넌트 내부의 상태를 공유하면서 비지니스 로직과 사용자 인터페이스와 관련된 부분을 구분하는 React 패턴입니다. 다시 말해, 합성 컴포넌트 패턴은 여러 개의 작은 컴포넌트들이 각각의 역할을 분담하도록 하고 이를 그룹화하여 하나의 큰 컴포넌트를 만드는 것이라고 할 수 있습니다.
하나의 컴포넌트로 만들기 때문에 재사용성이 가능해집니다. 컴포넌트를 사용할 때 개발자가 필요로 하는 서브(자식) 컴포넌트만 합성하여 사용할 수 있기 때문에 개발자에게 자율성을 줄 수 있습니다. 메인 컴포넌트와 서브 컴포넌트 간의 관계가 명확해지기 때문에 코드의 가독성을 높이고 유지보수가 용이해집니다.
팀 프로젝트에서 Tab 버튼 활용도가 높아 재사용성 및 유지보수 향상을 위해 하나의 컴포넌트를 만들어보려고 합니다.
Tabs 메인(부모) 컴포넌트를 만들고 Tab 서브(자식) 컴포넌트를 만들어 부모 컴포넌트로부터 전달되는 속성을 공유하면서, 서로의 상태를 업데이트하거나 이벤트를 처리할 수 있게 합니다.