useHistoryState
상태와 상태 변경 이력을 관리하는 훅입니다.
상태 변경 시마다 이력이 저장되며, 상태 히스토리를 이전(back
)과 다음(forward
)으로 이동할 수 있습니다. 또한 특정 시점의 상태로 이동(go
)할 수 있으며, 현재 상태를 대체(replaceState
)할 수 있습니다.
저장되는 이력의 최대 개수(capacity
)를 제한할 수 있습니다.
Code
Interface
typescript
interface UseHistoryStateReturn<T> {
state: T; // 현재 상태 값
canForward: boolean; // 다음 상태로 이동할 수 있는지 여부
canBack: boolean; // 이전 상태로 이동할 수 있는지 여부
setState: (newState: T | ((prevState: T) => T)) => void;
// 상태 히스토리에 상태를 추가하고 새로운 상태로 업데이트합니다.
replaceState: (newState: T | ((prevState: T) => T)) => void;
// 상태 히스토리의 현재 상태를 대체합니다.
back: () => void; // 상태 히스토리에서 이전 상태로 되돌리는 함수
forward: () => void; // 상태 히스토리에서 다음 상태로 이동하는 함수
go: (index: number) => void; // 상태 히스토리에서 특정 인덱스의 상태로 이동하는 함수
}
typescript
function useHistoryState<T>(
initialValue: T | (() => T),
capacity?: number): UseHistoryStateReturn<T>;
Usage
typescript
import { useHistoryState } from '@modern-kit/react'
const Example = () => {
const {
state,
canBack,
canForward,
setState,
replaceState,
back,
forward,
go
} = useHistoryState(0, 5);
return (
<div>
<p>{state}</p>
<button onClick={() => setState(state + 1)}>+1 (새 히스토리)</button>
<button onClick={() => replaceState(state + 10)}>+10 (히스토리 교체)</button>
<button onClick={back}>← 이전</button>
<button onClick={forward}>다음 →</button>
<button onClick={() => go(0)}>처음으로</button>
<button onClick={() => go(-1)}>마지막으로</button>
</div>
)
}
Example
현재 값: 0
뒤로가기 불가능 | 앞으로가기 불가능