확장성을 위한 Compound Component Pattern
date
Apr 2, 2023
slug
compound-component-pattern
status
Published
tags
React
summary
type
Post
시작하며
여러 서비스의 어드민 개발 과정에서, 유사한 기능들이 반복적으로 구현되는 경향이 있습니다. 이러한 반복적인 작업의 비효율성을 줄이기 위해, 특정 요구사항에 맞춰 표준화된 공통 컴포넌트들을 개발했습니다.
그럼에도 불구하고, 새로운 요구사항이 제시됨에 따라 이러한 공통 컴포넌트들이 그 요구를 충족시키지 못하는 상황이 발생했습니다. 추가 개발을 진행하면서, 원래의 표준화된 구조와 규격화된 과정이 점차 흔들리기 시작했습니다. 이를 통해 공통 컴포넌트를 개발하면서 확장성에 고민하는 계기가 되었습니다.
Compound Component Pattern
복잡한 컴포넌트들을 기능을 가지는 컴포넌트들로 나누어 독립적으로 동작하는 컴포넌트들을 조립하여 컴포넌트를 구성하는 디자인 패턴입니다. 상위 컴포넌트에서 사용할 데이터를 Context를 생성하여 하위 컴포넌트에서 사용합니다.
Context API를 사용하여 컴포넌트 계층 구조를 효과적으로 관리하고 props를 사용하지 않고도 컴포넌트 간에 데이터를 공유할 수 있습니다.
여러 서비스 어드민에서 사용될 Layout을 Componet Component Pattern 으로 공통컴포넌트로 개발했습니다.
폴더 구조
상위 컴포넌트
상위 컴포넌트인
index.tsx 는 정의한 상태와 로직을 하위 컴포넌트들과 공유하고 관련 컴포넌트들을 그룹화합니다.하위 컴포넌트
하위 컴포넌트는 상위 컴포넌트에서 공유한 상태와 로직을 사용할 수 있습니다. 단, 상위 컴포넌트에서 공유될 필요가 없는 경우, 하위 컴포넌트는 독립적인 props를 받아 사용합니다.
호출
마치며
Compound Component Pattern으로 확장성 있는 컴포넌트 개발에 대해 알아보았습니다. 이 글이 여러분의 프로젝트에 도움이 되기를 바랍니다. 앞으로도 유용한 정보를 공유하기 위해 노력하겠습니다.
