다른 형태 Header Compound Component 적용_01

 

header 형태가 다르지만, 똑같은 곳에 위치해있고
어떻게 재사용해야 할 지 고민이 됐다.
그래서 나는 Compound Component를 사용해보기로 했다.

1. Compound Component

1) 정의

컴파운드 컴포넌트는 그룹 컴포넌트의 동작과 상태를 포함하고 있지만 렌더링 제어를 외부 사용자에게 제공하는 패턴이라고 한다.

 

그게 무슨말인지 이해가 안갔다.

컴파운드 컴포넌트는 여러 개의 컴포넌트를 함께 사용하는 패턴이다. 이때, 컴포넌트들이 하나의 그룹을 이루어 특별한 동작을 한다

 

예시로 보자

// Compound Components 예시

// 부모 컴포넌트
function ToggleGroup({ children }) {
  // 이 부모 컴포넌트는 자식 컴포넌트들을 모아서 그룹으로 만든다!
  return <div>{children}</div>;
}

// 자식 컴포넌트 1
function ToggleButton1({ on, toggle }) {
  // 어떤 기능을 수행
  return (
    <button onClick={toggle}>
      {on ? '켜짐' : '꺼짐'}
    </button>
  );
}

// 자식 컴포넌트 2
function ToggleButton2({ on, toggle }) {
  // 다른 기능을 수행
  return (
    <button onClick={toggle}>
      {on ? 'ON' : 'OFF'}
    </button>
  );
}

// 사용 예시
function App() {
  return (
    <ToggleGroup>
      <ToggleButton1 />
      <ToggleButton2 />
    </ToggleGroup>
  );
}

 

2) 어떤 상황에서 많이 사용하는가

 Prop Drilling을 방지하는 데 도움이 되는 선언적 UI 구성 요소를 구성하는데 사용

• 토글(Toggle) 컴포넌트: 여러 버튼 중에서 하나만 활성화되어야 할 때 사용
• 탭(Tab) 컴포넌트: 여러 탭 중 하나를 선택할 수 있도록 할 때 사용
• 폼(Form) 그룹 컴포넌트: 여러 입력 필드를 하나로 묶어서 관리할 때 사용

3) JSX로 구성된 컴포넌트의 차이는 뭘까?

(1) compound Components

function ToggleGroup({ children }) {
  return <div>{children}</div>;
}

function ToggleButton({ on, toggle }) {
  return (
    <button onClick={toggle}>
      {on ? '켜짐' : '꺼짐'}
    </button>
  );
}

function App() {
  return (
    <ToggleGroup>
      <ToggleButton />
      <ToggleButton />
    </ToggleGroup>
  );
}

여기서 ToggleGroup은 Compound Components 패턴을 따르고 있다.

 

(2) JSX로 구성된 컴포넌트

function Button({ label, onClick }) {
  return <button onClick={onClick}>{label}</button>;
}

function App() {
  return (
    <div>
      <h1>Hello, World!</h1>
      <Button label="Click me" onClick={() => console.log('Button clicked!')} />
    </div>
  );
}

여기서 버튼은 주로 JSX로 UI를 정의하는 컴포넌트다.

 

Compound Components는 여러 컴포넌트를 함께 동작하게끔 설계된 패턴이며, 

JSX로 구성된 컴포넌트는 주로 UI를 정의하고 렌더링하는 데 사용된다.

Compound Components는 주로 관계와 동작에 중점을 두고, JSX로 구성된 컴포넌트는 주로 시각적인 표현에 중점을 둡니다.

 

4) 장점

▶ 관심사 분리 

    부모 컴포넌트에 모든 UI 상태 로직이 있고 이를 내부적으로 모든 자식 컴포넌트에게 전달한다면

    책임이 명확하게 구분된다. 

▶ 복잡성 감소 

    속성을 특정 컴포넌트로 전달하는 props Drilling과 달리 Compound Component 패턴은 속성을

    바로 자식 컴포넌트에 전달한다.

 

5) 단점

Compound Component의 핵심 단점으로는 부모 컴포넌트의 자식 컴포넌트만 props에 접근할 수 있다. 

 

 

 

 

https://bum-developer.tistory.com/entry/React-Compound-Component-%ED%8C%A8%ED%84%B4