compound component

Compound Component 패턴

리액트(React)와 같은 컴포넌트 기반 프레임워크에서 사용되는 디자인 패턴 중 하나입니다. 이 패턴은 관련된 여러 컴포넌트들을 함께 사용하여, 부모 컴포넌트가 자식 컴포넌트들을 명시적으로 제어할 필요 없이, 유연하고 재사용 가능한 방식으로 복잡한 UI 구조를 구성할 수 있게 도와줍니다.

Compound Component 패턴의 핵심 아이디어는 공유된 상태를 가지는 여러 컴포넌트들이 서로 협력하여 작동하는 것입니다.

const FlyOutContext = createContext();

function FlyOut(props) {
  const [open, toggle] = useState(false);

  return <FlyOutContext.Provider value={{ open, toggle }}> {props.children} </FlyOutContext.Provider>;
}
function Toggle() {
  const { open, toggle } = useContext(FlyOutContext);

  return (
    <div onClick={() => toggle(!open)}>
      {' '}
      <Icon />{' '}
    </div>
  );
}
function List({ children }) {
  const { open } = useContext(FlyOutContext);

  return open && <ul>{children}</ul>;
}
function Item({ children }) {
  return <li>{children}</li>;
}
FlyOut.Toggle = Toggle;
FlyOut.List = List;
FlyOut.Item = Item;

import React from 'react';
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>
  );
}