useCounter.md

useCounter

useCounter는 증가, 감소, 초기화 기능을 갖춘 숫자형 카운터 상태를 관리하는 리액트 훅이에요. 선택적으로 최소값과 최대값을 제공하여 카운터의 범위를 제한할 수 있어요.

인터페이스

function useCounter(options?: UseCounterOptions): UseCounterReturn;

type UseCounterOptions = {
  initialValue?: number;
  min?: number;
  max?: number;
  step?: number;
};
ㄴ
type UseCounterReturn = {
  count: number;
  increment: () => void;
  decrement: () => void;
  reset: () => void;
  setCount: (value: number | ((prev: number) => number)) => void;
};

파라미터

반환 값

예시

import { useCounter } from 'react-simplikit';

function ShoppingCart() {
  const { count, increment, decrement, reset } = useCounter({
    initialValue: 1,
    min: 1,
    max: 10,
  });

  return (
    <div>
      <span>수량: {count}</span>
      <button type="button" onClick={decrement}>-</button>
      <button type="button" onClick={increment}>+</button>
      <button type="button" onClick={reset}>초기화</button>
    </div>
  );
}

제약 조건

이 훅은 카운터가 지정된 범위 내에서 유지되도록 자동으로 보장해요:

• 값이 max보다 커지면 자동으로 max 값으로 제한돼요.
• 값이 min보다 작아지면 자동으로 min 값으로 제한돼요.
• setCount를 사용할 때 범위를 벗어나는 값은 자동으로 가장 가까운 경계값으로 조정돼요.