이 패턴은 컴포넌트를 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 세 곳 모두를 체크해야 한다.
이 패턴을 사용하는 라이브러리 : Material UI