useCounter

카운터를 관리하는 커스텀 훅으로, 증가, 감소 및 리셋 기능 등을 제공합니다.

Code

🔗 실제 구현 코드 확인

Interface

typescript

function useCounter(initialValue: number = 0): {
  counter: number;
  setCounter: React.Dispatch<React.SetStateAction<number>>;
  increment: () => void;
  decrement: () => void;
  reset: () => void;
}

Parameters

Name	Type	Description
initialValue	number	카운터의 초기값. 기본값은 0

Returns

Name	Type	Description
counter	number	현재 카운터 값입니다.
setCounter	React.Dispatch<React.SetStateAction<number>>	카운터 값을 직접 설정하는 함수입니다.
increment	() => void	카운터를 1 증가시키는 함수입니다.
decrement	() => void	카운터를 1 감소시키는 함수입니다.
reset	() => void	카운터를 초기값으로 리셋하는 함수입니다.

Usage

typescript

import { useCounter } from '@modern-kit/react';

const Example = () => {
  const { counter, setCounter, increment, decrement, reset } = useCounter(10);

  return (
    <div>
      <div>
        <button onClick={increment}>더하기</button>
        <button onClick={decrement}>빼기</button>
        <button onClick={() => setCounter(20)}>20으로 셋팅</button>
        <button onClick={reset}>10으로 리셋</button>
      </div>
      <p>counter: {counter}</p>
    </div>
  );
};

Example

counter: 10