이 패턴은 컴포넌트를 controlled component로 바꿔준다. 외부 상태는 single source of truth(SSOT)로 사용되어 유저(사용자 개발자)로 하여금 커스텀 로직을 삽입할 수 있게끔 한다.

<aside> 💡 *Controlled component란 컴포넌트의 상태를 제어할 수 있는 컴포넌트를 의미한다.

SSOT란 단일 진실 공급원이라고도 번역되는데, 이는 모든 데이터 요소를 한 곳에서만 제어, 편집하도록 하는 것이다.*

</aside>

예제

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

function Usage() {
  const [count, setCount] = useState(0);

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

export { Usage };

장점

단점

Criteria

이 패턴을 사용하는 라이브러리 : Material UI