useMultiState

Introduction

이 훅은 React 애플리케이션에서 다양한 상태를 하나의 훅으로 관리하기 위해 만들어진 유틸리티입니다. 다수의 상태를 효과적으로 관리하면서 코드를 간결하게 유지할 수 있습니다. 아래는 이 훅을 사용하는 간단한 예제와 설명입니다.

Example

import React from "react";
​
function ExampleComponent() {
  // 초기 상태 정의
  const initialStates = {
    username: "",
    email: "",
    age: 0,
  };
​
  // useMultiState 훅을 사용하여 상태 및 이벤트 핸들러 가져오기
  const [state, dispatch, onChange, onClear] = useMultiState(initialStates);
​
  return (
    <div>
      <label>
        Username:
        <input type="text" name="username" value={state.username} onChange={onChange} />
        <button onClick={() => onClear("username")}>Clear</button>
      </label>
​
      <label>
        Email:
        <input type="email" name="email" value={state.email} onChange={onChange} />
        <button onClick={() => onClear("email")}>Clear</button>
      </label>
​
      <label>
        Age:
        <input type="number" name="age" value={state.age} onChange={onChange} />
        <button onClick={() => onClear("age")}>Clear</button>
      </label>
​
      <div>
        <p>Current State:</p>
        <pre>{JSON.stringify(state, null, 2)}</pre>
      </div>
    </div>
  );
}
​
export default ExampleComponent;
​

이 예시 코드에서 useMultiState 훅을 사용하여 username, email, age 세 가지 상태를 관리하고 있습니다. 각 입력 필드는 해당 상태를 제어하며, "Clear" 버튼을 클릭하면 해당 필드의 값을 초기화합니다. 현재의 전체 상태는 state 객체로 확인할 수 있습니다. 이렇게 하나의 훅으로 여러 상태를 효과적으로 관리할 수 있어 코드를 깔끔하게 유지할 수 있습니다.

Hook

import React from "react";
​
interface StateType {
  [key: string]: string | string[] | any;
}
​
interface ActionType {
  name: string;
  value: string | any;
}
​
type DispatchType = React.Dispatch<ActionType>;
type ChangeEventType = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
type ClearEventType = (name: string) => void;
type ReturnType = [StateType, DispatchType, ChangeEventType, ClearEventType];
​
/**
 * 이 훅은 많은 상태관리를 하나의 훅으로 유용하게 하기 위해서 만들어졌습니다.
 * 다양한 상태들을 하나의 훅으로 관리하면서 더욱 편리하게 상태관리를 할 수 있습니다.
 *
 * @template StateType - 초기값을 나타내는 타입
 * @param {StateType} initialState - 상태관리 타입
 * @returns {ReturnType} 배열형태의 상태관리와 이벤트 핸들러, 삭제 핸들러를 반환한다.`
 */
​
const reducer = (state: StateType, action: ActionType): StateType => {
  return {
    ...state,
    [action.name]: action.value,
  };
};
​
export default function useMultiState(initialState: StateType = {}): ReturnType {
  const [state, dispatch] = React.useReducer(reducer, initialState);
​
  const onChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    if (!e.target) return;
    return dispatch({ name: e.target?.name, value: e.target?.value });
  };
​
  const onClear = (name: string) => dispatch({ name, value: "" });
​
  return [state, dispatch, onChange, onClear];
}

이 훅을 통해서 많은 상태관리를 하나의 훅으로 관리할 수 있게 합니다.