좀 더 IoC에 집중해보자. 메인 로직은 이제 custom hook으로 들어간다.
hook은 State, Handler와 같은 내부 로직들을 포함하며 유저(사용 개발자)에게 더 많은 통제권을 준다.
import React from "react";
import { Counter } from "./Counter";
import { useCounter } from "./useCounter";
function Usage() {
const { count, handleIncrement, handleDecrement } = useCounter(0);
const MAX_COUNT = 10;
const handleClickIncrement = () => {
// Put your custom logic
if (count < MAX_COUNT) {
handleIncrement();
}
};
return (
<>
<Counter value={count}>
<Counter.Decrement
icon={"minus"}
onClick={handleDecrement}
disabled={count === 0}
/>
<Counter.Label>Counter</Counter.Label>
<Counter.Count />
<Counter.Increment
icon={"plus"}
onClick={handleClickIncrement}
disabled={count === MAX_COUNT}
/>
</Counter>
<button onClick={handleClickIncrement} disabled={count === MAX_COUNT}>
Custom increment btn 1
</button>
</>
);
}
export { Usage };
더더욱 많은 제어권을 준다.
유저는 이제 Hook과 JSX 사이에 자신만의 로직을 넣을 수 있다.
사용하는 것이 더 복잡하다.
로직이 렌더링하는 부분과 분리되어 있으며, 유저는 둘을 이어줘야 한다.
올바르게 사용하기 위해서는 컴포넌트가 어떻게 동작하는지 알아야할 필요가 있다.
이 패턴을 사용하는 라이브러리 : React table
, React Hook form