useCounter

Introduction

React 애플리케이션에서 다양한 상황에서 유용하게 활용될 수 있습니다.

1. 재사용성 및 모듈화: 이 코드를 사용하면 여러 컴포넌트에서 동일한 숫자 조작 로직을 반복 작성하지 않고도 재사용할 수 있습니다. 훅으로 로직을 캡슐화하면 필요할 때마다 해당 로직을 가져와서 사용할 수 있습니다.

2. 간편한 숫자 조작: 숫자를 증가, 감소, 초기값으로 리셋하거나 직접 값을 설정하는 등의 기능이 간단하게 제공됩니다. 이는 특히 UI에서 숫자 조작이 필요한 경우에 편리합니다.

3. 상태 관리의 일관성: React의 useState를 사용하여 상태를 관리하고 있기 때문에 React의 상태 시스템과 일관성 있게 통합됩니다. 이는 React의 컴포넌트 생명주기나 렌더링 동작과 관련된 다양한 기능들을 활용할 수 있게 합니다.

4. 타입 안정성: TypeScript를 사용하여 훅의 인터페이스를 정의하고 있기 때문에, 코드 작성 시에 타입 체크가 가능하며 타입 안정성을 제공합니다.

예를 들어, 다수의 컴포넌트에서 동일한 숫자 조작 로직을 필요로 하는 경우, 이 코드를 사용하여 중복을 피하고 효율적으로 관리할 수 있습니다. 또한, 특정 컴포넌트에서만 필요한 추가적인 로직이나 상태가 있을 경우에도 해당 컴포넌트에서 필요한 로직을 추가로 구현하거나 확장할 수 있습니다.

Example

import React from "react";
​
const MyComponent = () => {
  const { count, increment, decrement, reset, setCount } = useCounter(10);
​
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <button onClick={reset}>Reset</button>
      <button onClick={() => setCount(5)}>Set Count to 5</button>
    </div>
  );
};
​
export default MyComponent;

Hook

import type { Dispatch, SetStateAction } from "react";
import { useState } from "react";
​
interface UseCounterOutput {
  count: number;
  increment: () => void;
  decrement: () => void;
  reset: () => void;
  setCount: Dispatch<SetStateAction<number>>;
}
/**
 *
 * 숫자를 조작하는 커스텀 훅
 * @param {number} initialNumber - 초깃값 숫자
 * @returns {object}
 * @property {Function} increment - 숫자가 1씩 증가
 * @property {Function} decrement - 숫자가 1씩 감소
 * @property {Function} reset - 초깃값으로 변경 및 0
 * @property {Function} setCount - 직접 숫자 조작
 */
const useCounter = (initialNumber: number): UseCounterOutput => {
  const [count, setCount] = useState(() => {
    return initialNumber ?? 0;
  });
​
  const increment = () => {
    setCount((prev) => prev + 1);
  };
​
  const decrement = () => {
    setCount((prev) => prev - 1);
  };
​
  const reset = () => {
    setCount(initialNumber ?? 0);
  };
​
  return { count, increment, decrement, reset, setCount };
};
​
export default useCounter;
​

이 코드는 React 애플리케이션에서 사용할 수 있는 숫자를 조작하는 커스텀 훅인 useCounter를 정의합니다. 이 훅은 초기값을 받아 숫자를 증가, 감소, 초기값으로 리셋하고 직접 숫자를 조작할 수 있는 기능을 제공합니다.

코드의 구조는 다음과 같습니다:

1. 인터페이스 정의: UseCounterOutput 인터페이스는 훅에서 반환되는 객체의 타입을 정의합니다. 이 객체에는 count라는 숫자 값과 숫자를 조작하기 위한 네 가지 함수(increment, decrement, reset, setCount)가 포함되어 있습니다.

2. useCounter 함수: 이 함수는 초기값을 받아 useState 훅을 사용하여 상태를 관리합니다. 초기값이 주어지지 않으면 0이 기본값으로 사용됩니다. 이 함수는 UseCounterOutput 타입을 반환하며, 객체 안에 숫자 값과 각각의 조작 함수를 포함시킨 후 반환합니다.

3. increment 함수: count 값을 1 증가시키는 함수입니다. setCount 함수를 사용하여 이전 값에 1을 더한 값을 설정합니다.

4. decrement 함수: count 값을 1 감소시키는 함수입니다. setCount 함수를 사용하여 이전 값에서 1을 뺀 값을 설정합니다.

5. reset 함수: 초기값으로 count 값을 변경하거나, 초기값이 주어지지 않은 경우 0으로 리셋하는 함수입니다.

6. setCount 함수: 외부에서 직접 숫자를 설정할 수 있는 함수로, React의 Dispatch와 SetStateAction을 사용하여 타입을 지정하였습니다.