이 패턴은 불필요한 prop drilling 없이 Expressive(표현적 풍부한) 하고 Declarative(선언적)한 컴포넌트를 만들 수 있게 도와줍니다. 만약 좀 더 customizable(사용자 정의화) 하고 관심사를 분리하도록 하고 싶다면 이 패턴을 고려해보아야 합니다.

예제

import React from "react";
import { Counter } from "./Counter";

function Usage() {
  const handleChangeCounter = (count) => {
    console.log("count", count);
  };

  return (
    <Counter onChange={handleChangeCounter}>
      <Counter.Decrement icon="minus" />
      <Counter.Label>Counter</Counter.Label>
      <Counter.Count max={10} />
      <Counter.Increment icon="plus" />
    </Counter>
  );
}

export { Usage };

장점

Untitled

단점

Criteria