[UI Component] Design Patterns - Compound

Compound

- 하나의 작업을 위해 여러 컴포넌트를 만들어 역할을 분담하게 함

- 여러 컴포넌트들이 모여 하나의 동작을 할 수 있게 해줌

- 컴포넌트의 Static property로 만듦

- 컴포넌트 라이브러리 만들 때 유용하게 사용 가능 ex) Semantic UI library

- 자식 컴포넌트 순회 처리하는데도 Compound 패턴 사용 가능

  - React.cloneElement 사용하여 자식 컴포넌트 복제하여 각각 prop 넘길 수 있음
    (Context API 사용 X)

- 장점

  - 추상화가 잘됨

  - 자식 컴포넌트들을 일일히 import할 필요 없음

- 단점

  - 내부에서 React.children.map을 사용하고 있어서 사용하는 쪽에서 자식 컴포넌트를
    사전 정의된 형태로 넘겨야 하는 제약 발생

  - 엘리먼트 복제 시 복제 대상 컴포넌트가 기존 갖고 있는 prop과 이름 충돌 발생 가능

 

- 예시

 

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>
  )
}

 

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

 

- 활용

---

[UI Component] Design Patterns - Compound