React 기본~useReducer/ countup

• useReducer는 구성 요소의 상태를 제어하는 ​​반응 후크입니다.

• 이 후크는 입력 값을 제어하는 ​​데 자주 사용됩니다.

• 이 Hook의 특징은 useSate와 달리 상태를 어떻게 업데이트할지 미리 결정해 둔다는 점입니다.

・src/Example.js

import { useReducer } from "react";

const reducer = (prev, { type, step }) => {
  switch (type) {
    case "+":
      return prev + step;
    case "-":
      return prev - step;
    default:
      throw new Error("Invalid action");
  }
};

const Example = () => {
  const [state, dispatch] = useReducer(reducer, 0);

  const countup = () => {
    dispatch({ type: "+", step: 2 });
  };

  const countdown = () => {
    dispatch({ type: "-", step: 3 });
  };

  return (
    <>
      <h3>{state}</h3>
      <button onClick={countup}>+</button>
      <button onClick={countdown}>-</button>
    </>
  );
};

export default Example;

• `reducer' 함수는 상태를 업데이트합니다. 스위치 기능을 이용하세요.

• 유형, 단계 등과 같은 개체 매개변수를 전달하는 `dispatch' 함수를 사용합니다.

・카운트업 액션

・카운트다운 액션

위 내용은 React 기본~useReducer/ countup의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!