참고자료
https://velog.io/@velopert/react-hooks#1-usestate

import React, { useReducer } from "react";

const reducer = (state, action) => {
  switch (action.type) {
    case "INCREMENT":
      return { value: state.value + 1 };
    case "DECREMENT":
      return { value: state.value - 1 };
    default:
      return state;
  }
};

const Test = () => {
  const [state, dispatch] = useReducer(reducer, { value: 0 });

  return (
    <div>
      <p>{state.value}</p>
      <button onClick={() => dispatch({ type: "INCREMENT" })}>증가</button>
      <button onClick={() => dispatch({ type: "DECREMENT" })}>감사</button>
    </div>
  );
};
export default Test;

const [state, dispatch] = useReducer(reducer, { value: 0 });

이부분이 이해가 안가서 다시 저기 링크에 들어가서 읽어봤다.

첫번째 파라미터에는 리듀서 함수
두번째 파라미터에는 해당 리듀서의 기본 값

그런데 공부했을때 ,
useState 와 useEffect 의경우 기능에 따라 이름을 왜 이렇게 지었을까 이해가 갔지만
왜 useReducer 일까?? 검색을 해봤습니다.

https://devlog.jwgo.kr/2018/08/23/redux-which-is-weird-term/

어떤 복잡한 수학문제를 다른 비슷한 문제로 변경해서 (더 간단하게 만드려고) 푸는 방법을 수학에서는 reduction 이라고도 합니다.

이 문장이 크게 와닿았습니다.
그래서
reduce 는 "고쳐간다" (간단하게 만들기 위해서 , 혹은 특정 규칙을 적용하기 위해서) 라고 생각하면 될것 같습니다.

즉 , 리덕스에서의 reduce() 는 현재상태 (previousState)를 새로운상태(newState) 로 변경할 때 쓰는 함수가 됩니다.

인풋상태 관리 예시

이전에서 useState 를 여러개를 작성해서 관리를 하였다.
하지만 useReducer 를 사용한다면 클래스형 컴포넌트와 유사한 방식으로 작업을 처리할수있다고 합니다.

import React, { useReducer } from "react";

const reducer = (state, action) => {
  return {
    ...state,
    [action.name]: action.value,
  };
};

const Test = () => {
  const [state, dispatch] = useReducer(reducer, {
    name: "",
    nickname: "",
  });
  const { name, nickname } = state;
  const onChange = (e) => {
    dispatch(e.target);
  };

  return (
    <div>
      <div>
        <input name="name" value={name} onChange={onChange} />
        <input name="nickname" value={nickname} onChange={onChange} />
      </div>
      <div>
        <div>
          <b>{name}</b>
        </div>
        <div>{nickname}</div>
      </div>
    </div>
  );
};

export default Test;

인풋의 개수가 많아져도 코드가 짧아지게 됩니다.