[React] 리듀서(useReducer)

1. 만만한 count 예제 스타투

import { useState } from "react";
import Example1 from "./Example1";
import Example2 from "./Example2";

function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <Example1 count={count} setCount={setCount} />
      <Example2 count={count} setCount={setCount} />
    </>
  );
}

export default App;

 타입 에러가 남..

 

type Example1 = {
  count: number;
  setCount: React.Dispatch<React.SetStateAction<number>>;
};

export default function Example1({ count, setCount }: Example1) {
  return (
    <>
      <h1>Example1 {count}</h1>
      <button onClick={() => setCount((prev) => prev + 2)}>+2 증가</button>
    </>
  );
}

type Example2 = {
  count: number;
  setCount: React.Dispatch<React.SetStateAction<number>>;
};

export default function Example2({ count, setCount }: Example2) {
  return (
    <>
      <h1>Example1 {count}</h1>
      <button onClick={() => setCount((prev) => prev + 4)}>+4 증가</button>
    </>
  );
}

 

 

2. useReducer 톺아보기

useReducer – React

const [state, dispatch] = useReducer(reducer, initialArg, init?)

• reducer Prop: 상태관리 담당 콜백함수
• initialArg Prop: 초깃값

import { useReducer } from 'react';

function reducer(state, action) {
  // 상태 관리 로직...
}

function MyComponent() {
  const [state, dispatch] = useReducer(reducer, 0);
  // ...

• reducer 함수 매개변수 state는 0이라는 초깃값이 들어갑니다.
• reducer 함수의 반환된 값이 useReducer의 state 상태 값으로 할당됩니다.
• dispatch가 호출되면 인수가 상태 관리 로직인 reducer 함수 인자 action으로 할당됩니다.

import { useReducer, useState } from "react";
import Example1 from "./Example1";
import Example2 from "./Example2";

const reducer = (state: number, action: any) => {
  return 10;
};

function App() {
  const [count, setCount] = useState(0);
  const [state, dispatch] = useReducer(reducer, 0);

  return (
    <>
      <h1>Reducer State: {state}</h1>
      <button onClick={() => dispatch(0)}>dispatch</button>
      <Example1 count={count} setCount={setCount} />
      <Example2 count={count} setCount={setCount} />
    </>
  );
}

export default App;

 

 

3. 실습해보기

import { useReducer } from "react";
import Example1 from "./Example1";
import Example2 from "./Example2";

const reducer = (state: number, action: { type: string; payload: number }) => {
  switch (action.type) {
    case "incrementByTwo":
      return state + action.payload;
    case "incrementByFour":
      return state + action.payload;
    default:
      return state; // 로직에 맞지 않으면 원래의 상태를 반환
  }
};

function App() {
  const [count, dispatch] = useReducer(reducer, 0);

  return (
    <>
      <Example1 count={count} dispatch={dispatch} />
      <Example2 count={count} dispatch={dispatch} />
    </>
  );
}

export default App;

type Example1 = {
  count: number;
  dispatch: React.Dispatch<{ type: string; payload: number }>;
};

export default function Example1({ count, dispatch }: Example1) {
  return (
    <>
      <h1>Example1 {count}</h1>

      <button onClick={() => dispatch({ type: "incrementByTwo", payload: 2 })}>
        +2 증가
      </button>
    </>
  );
}

type Example2 = {
  count: number;
  dispatch: React.Dispatch<{ type: string; payload: number }>;
};

export default function Example2({ count, dispatch }: Example2) {
  return (
    <>
      <h1>Example2 {count}</h1>
      <button onClick={() => dispatch({ type: "incrementByFour", payload: 4 })}>
        +4 증가
      </button>
    </>
  );
}

sign-into-app-reducer (실습).zip

0.01MB