<aside> 🔥 useState의 대체 함수이다.

(state, action) ⇒ newState의 형태로 reducer를 받고 dispatch메소드와 짝의 형태로

현재 state를 반환한다.

다수의 하윗값을 포함하는 복잡한 정적 로직을 만드는 경우나

다음 state가 이전 state에 의존적인 경우 보통 useReducer를 선호.

</aside>

<aside> 🔥 useReducer의 예시

첫번째 파라미터에는 리듀서 함수를 넣고, 두번째 파라미터에는 해당 리듀서의 기본값을 넣어준다.

이 Hook을 사용하면 state값과 dispatch 함수를 받아오는데 여기서 state는 현재 가리키고 있는

상태이며 dispatch는 액션을 발생시키는 함수이다.

가장 큰 장점은 컴포넌트 업데이트 로직을 컴포넌트 바깥으로 빼낼 수 있다는 점이다.

import React, { useReducer, useState } from "react";
function reducer(state, action) {
  switch (action.type) {
    case "INCREMENT":
      return { value: state.value + 1 };
    case "DECREMENT":
      return { value: state.value - 1 };
    default:
      return state;
  }
}

function Counter(props) {
  const [state, dispatch] = useReducer(reducer, { value: 0 });
  return (
    <div>
      <p>
        현재 카운터 값은 <b>{state.value}</b>입니다.
      </p>
      <button onClick={() => dispatch({ type: "INCREMENT" })}>+1</button>
      <button onClick={() => dispatch({ type: "DECREMENT" })}>-1</button>
    </div>
  );
}

export default Counter;

</aside>

<aside> 🔥 input 상태 관리하기

useReducer를 시용해서 input 상태 관리.

input 태그에 name을 할당하고 e.target.name을 참조해서 setState 해줄 수 있다.

useReducer에서 액션은 어떤 값도 가능하다.

이번에는 이벤트 객체가 지니고 있는 e.target값 자체를 액션 값으로 사용했다.

input 개수가 아무리 많아져도 코드를 짧고 깔끔하게 유지할 수 있다.

import React, { useEffect, useReducer, useState } from "react";

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

const Info = () => {
  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>이름:</b> {name}
        </div>
        <div>
          <b>닉네임:</b> {nickname}
        </div>
      </div>
    </div>
  );
};

export default Info;

</aside>