23.01.12 useReducer

useInputs 커스텀훅(useReducer사용)

useReducer

action(액션)만 추가하고 dispatch함수만 자식 컴포넌트에 전달하면 되기 때문에
useState보다 확장성이 높으며 상태관리도 용이함

import { useReducer } from "react";

const useInputs = (initialState) => {
  const reducer = (state, action) => {
    switch (action.type) {
      case "CHANGE_INPUT":
        return {
          ...state,
          [action.name]: action.text,
        };
      case "CHANGE_RESET":
        return initialState;
      default:
        return;
    }
  };

  const [state, dispatch] = useReducer(reducer, initialState);

  const onChange = (e, name) => {
    const { text } = e.nativeEvent;
    dispatch({ type: "CHANGE_INPUT", name, text });
  };

  const reset = () => {
    dispatch({ type: "CHANGE_RESET" });
  };

  return [state, onChange, reset]
};

export default useInputs;