상태ful 로직을 이름 있는 Hook으로 재사용합니다.
커스텀 Hook은 use로 시작하며 다른 Hook을 조합해 상태와 동작을 반환합니다. UI가 아니라 상태 로직의 계약을 공유합니다.
각 Hook 호출은 독립 상태를 가지며 공유가 필요하면 Context 같은 명시적 수단을 사용합니다.
Hook은 컴포넌트나 다른 Hook의 최상위에서만 호출합니다.
조건문 안에서 Hook을 호출하면 호출 순서가 렌더마다 달라집니다.
로컬 프로젝트에서 확인해보세요step 인수를 받아 원하는 크기로 증가하도록 확장하세요.
import { useState } from "react";
function useCounter(initial = 0) {
const [value, setValue] = useState(initial);
return {
value,
increase: () => setValue((v) => v + 1),
reset: () => setValue(initial),
};
}
export default function App() {
const counter = useCounter(3);
return (
<main>
<h1>{counter.value}</h1>
<button onClick={counter.increase}>증가</button>
<button onClick={counter.reset}>초기화</button>
</main>
);
}