[React] 상태관리 (useState / useReducer)

useState (값만 관리)

const [ state, setState] useState(초기값)

setState(state + 1)

ex> const [ number, setNumber ] = useState(0)

 

Counter2.js (useState 버전)

import React, { useState } from 'react';

const Counter2 = (props) => {
    // let number = 0;
    const [ number, setNumber ] = useState(0);   // 기본값은 0이다 
    function Increase() {
        setNumber(number+1);
    }
    function Decrease() {
        setNumber(number-1);
    }
    return (
        <div>
            <h2>{number}</h2>
            <button onClick={Decrease}>-1</button>
            <button onClick={Increase}>+1</button>
        </div>
    );
};

export default Counter2;

 

 

 

useReducer (값이 변경될 때 다른 것 처리도 가능)

import { useReducer } from 'react'

const [ state, dispatch ] = useReducer(함수, 초기값)

ex> const [ state, dispatch ] = useReducer(reducer, 0)

dispatch({ type: "INCREASE" })   // dispatch는 액션을 전달

function reducer(state, action) {

                switch (action.type) {

                case 'INCREASE':

                return state+1;

                case 'DECREASE':

                return state-1;

                }

}

 

Counter2.js (useRecucer 버전)

import React, { useReducer } from 'react';
function reducer(state, action) {
    switch(action.type) {
        case "INCREASE":
            return state +1;
            case "DECREASE":
            return state-1;
            default:
            return state;
    }
}

const Counter2 = (props) => {
    // let number = 0;
    const [ number, dispatch ] = useReducer(reducer, 0);   // 기본값은 0이다 
    function Increase() {
        dispatch({type: "INCREASE"});
    }
    function Decrease() {
        dispatch({type: "DECREASE"});
    }
    return (
        <div>
            <h2>{number}</h2>
            <button onClick={Decrease}>-1</button>
            <button onClick={Increase}>+1</button>
        </div>
    );
};

export default Counter2;