이 패턴은 컴포넌트를 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 };

장점

• 더 많은 통제권을 준다.

  메인 state가 컴포넌트 바깥에 드러나있기 때문에 유저는 직접적으로 그 컴포넌트를 컨트롤 할 수 있게 된다.

  

단점

• 사용하는 것이 복잡하다. 이전에는 JSX만 구현하는 것만으로도 컴포넌트를 동작하게끔 하는 것이 가능했지만 이제는 JSX, useState, handleChange 세 곳 모두를 체크해야 한다.

  

Criteria

• Inversion of Control(IoC) : ⭐⭐ / 4
• Integration complexity : ⭐ / 4

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