1. Compound Component Pattern

@radix-ui 같은 나만의 라이브러리 만들어보기 첫 시작.

컴파운드 패턴의 이점

1. 재사용성과 조합성

2. 명확한 API

3. 유연성

4. 내부 상태의 캡슐화

컴파운드 패턴의 특징

공통된 상태를 공유하는 여러 컴포넌트를 조합하여, 하나의 큰 컴포넌트를 만드는 디자인 패턴.

컴포넌트 간 명확한 통신 방법 & 각 컴포넌트는 독립적으로 분리되어 재사용성이 높음.

1. 부모-자식 관계를 통해 명시적으로 연결. 각 컴포넌트의 역할이 분명

2. 상태공유- 내부 상태를 자식 컴포넌트와 공유

3. 컴포넌트는 독립적으로 사용될 수 있으므로, 다른 Context에서도 재사용

아래는 React.ContextAPI를 사용한 컴파운드 패턴.

FlyOut 컴포넌트는 내부에 기본적으로 다음 3가지를 가지고 있다:

• 토글 버튼과 List를 가지고 있는 FlyOut wrapper
• List를 토글하는 Toggle 버튼
• 메뉴 아이템을 가지고 있는 List

 

토글과 리스트 컴포넌트를 사용하기 위해 Flyout 안에 자식으로 받아오는 것이 아닌 contextAPI를 통해 토글 컴포넌트를 Flyout 의 속성으로 만들었음. 때문에 Flyout만 import 하면 됨

import { FlyOut } from './FlyOut';
export default function FlyoutMenu() {
    return (
        <FlyOut>
            <FlyOut.Toggle />
            <FlyOut.List>
                <FlyOut.Item>Edit</FlyOut.Item>
                <FlyOut.Item>Delete</FlyOut.Item>
            </FlyOut.List>
        </FlyOut>
    );
}

출처: https://im-developer.tistory.com/238