컴포넌트(5) 리액트 훅(react hook)사용 - useReducer

1. useReducer 훅이란?

- useReducer은 상태를 관리하고 업데이트하는 훅인 useState를 대체할 수 있는 함수이다.

- 한 컴포넌트 내에서 State를 업데이트하는 로직 부분을 그 컴포넌트로부터 분리시키는 것이 가능하여 코드의 최적화 할 수 있다.

 

기본형

const [state, dispatch] = useReducer(reducer, initialState);

state : 현재 상태
dispatch : action을 발생시키는 함수
reducer : state와 action를 받아 새로운 state를 반환하는 함수
initialState : 초기값

 

같은 로직을 각각 useState훅과 useReducer를 사용하여 비교해보는게 이해가 빠르다.

 

App.js

import CounterUseState from "./component/CounterUseState";
import CounterUseReducer from "./component/CounterUseReducer";

const App = () => {
  return (
    <div style={{ position: "absolute", top: "50%", left: "50%" }}>
      <span>useState 사용하기</span>
      <CounterUseState />
      <br/>
      <hr/>
      <span>useReducer 사용하기</span>
      <CounterUseReducer />      
    </div>

);
};

export default App

 

src/component/CounterUseState.js

import React, { useState } from "react";

function CounterUseState() {

    const [number, setNumber] = useState(0);

    //증가 함수 선언
    const fnIncrease = () => {
        setNumber((prevNumber) => prevNumber + 1);
    };

    //감소 한수 선언
    const fnDecrease = () => {
        setNumber((prevNumber) => prevNumber - 1);
    };

    return (
        <div>
            <h1>{number}</h1>
            <button onClick={fnIncrease}>+1</button>
            <button onClick={fnDecrease}>-1</button>
        </div>
    );
}

export default CounterUseState;

 

src/component/CounterUseReducer.js

import React, { useReducer } from "react";

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

function CounterUseReducer() {

    const [number, dispatch] = useReducer(reducer, 0);

    //증가 함수 선언
    const fnIncrease = () => {
        dispatch({ type: "INCREMENT" });
    };

    //감소 함수 선언
    const fnDecrease = () => {
        dispatch({ type: "DECREMENT" });
    };

    return (
        <div>
            <h1>{number}</h1>
            <button onClick={fnIncrease}>+1</button>
            <button onClick={fnDecrease}>-1</button>
        </div>
    );
}

export default CounterUseReducer;

 

# 결과

useState와 useReducer의 결과와 작동로직은 똑같다.

 

다른점은 useReducer인 경우 reducer라는 action타입을 받아 분기처리하는 function을 만들고 dispatch로 액션을 발생시켰다.

 

useState vs useReducer

- 컴포넌트에서 관리하는 state의 수가 적다 => useState
- 컴포넌트에서 관리하는 state의 수가 많고 state를 변경하는 함수가 많다 => useReducer

 

 

 

 

출처

https://cocoon1787.tistory.com/800