useReducer

 

 

버튼을 클릭시 NumberDispatch 함수로 useReducer 의 numberReducer 함수가 실행이되고, 그결과가 number 에 반영이 되는 구조이다.

useState 와 비슷 하지만 직접 값을 바꾸는게 아니라 action 을 전달하면 함수에의해 값이 바뀌는 구조

import { useReducer } from "react";

function App() {
  function numberReducer(oldNumber, action) {
    if (action === "plus") {
      return oldNumber + 1;
    } else if (action === "minus") {
      return oldNumber - 1;
    } else if (action === "reset") {
      return (oldNumber = 0);
    }
  }


  const [number, numberDispatch] = useReducer(numberReducer, 0);


  return (
    <div>      
      <button onClick={() => numberDispatch("minus")}>-</button>
      <span>{number}</span>
      <button onClick={() => numberDispatch("plus")}>+</button>
      <button onClick={() => numberDispatch("reset")}>reset</button>
    </div>
  );
}