[React] useReducer - 복잡한 상태관리 useReducer를 사용해보자

useReducer는 useState의 대채 함수이다.

useReducer 장점

1. 한 컴포넌트 내에서 State 업데이트 로직을 컴포넌트로부터 분리가 가능
2. 복잡한 상태를 체계적으로 관리하기 용이함

useState 와 useReducer 차이

useState()	useReducer()
독립적인 state 데이터에 적합함	연관된 state 관련 데이터가 있는 경우 고려해야함.
state 업데이트가 쉽고 몇 가지 업데이트로 제한될 때	복잡한 state 업데이트가 있는 경우 유용함.

useState 와 useReducer 차이

useState를 사용한 상태관리

import { useState } from 'react';
import { Helmet } from 'react-helmet';
import classes from './App.module.css';

const App = (props) => {
    const [number, setNumber] = useState(0);

    const upNumberHandler = () => {
        setNumber(number + 1);
    };
    const resetNumberHandler = () => {
        setNumber(0);
    };
    const downNumberHandler = () => {
        setNumber(number - 1);
    };
    return (
        <div className={classes.root}>
            <Helmet htmlAttributes={{ lang: 'ko' }} />
            <input type="button" value="-" onClick={downNumberHandler} />
            <input type="button" value="0" onClick={resetNumberHandler} />
            <input type="button" value="+" onClick={upNumberHandler} />
            <span>{number}</span>
        </div>
    );
};

export default App;

useReducer를 사용한 상태관리

import { useReducer } from 'react';
import { Helmet } from 'react-helmet';
import classes from './App.module.css';

const countReducer = (state, action) => {
    if (action === 'UP') {
        return state + 1;
    } else if (action === 'RESET') {
        return 0;
    } else if (action === 'DOWN') {
        return state - 1;
    }
};

const App = (props) => {
    const [number, numberDispatch] = useReducer(countReducer, 0);

    const upNumberHandler = () => {
        numberDispatch('UP');
    };
    const resetNumberHandler = () => {
        numberDispatch('RESET');
    };
    const downNumberHandler = () => {
        numberDispatch('DOWN');
    };
    return (
        <div className={classes.root}>
            <Helmet htmlAttributes={{ lang: 'ko' }} />
            <input type="button" value="-" onClick={downNumberHandler} />
            <input type="button" value="0" onClick={resetNumberHandler} />
            <input type="button" value="+" onClick={upNumberHandler} />
            <span>{number}</span>
        </div>
    );
};

export default App;

useReducer 기본 구조

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

• state: 컴포넌트에서 사용할 state
• dispatch: 컴포넌트 내에서 state의 업데이트를 위해 reducer함수를 실행시키는 함수
• reducer: 컴포넌트 “외부”에서 state 업데이를 담당하는 함수(위 예에선 countReducer 실행 함수로 보면 됨)
• initialArg: 초기값 (초기 state)
• init: 초기함수

reducer 함수

state과 action 객체를 파라미터로 받아 새로운 상태를 반환해주는 함수이다.

const reducer = (state, action) => { ... }

• state: 컴포넌트에서 사용할 상태
• action: 업데이트를 위한 정보를 갖고있는 값 (주로 객체임)