[useReducer] 컴포넌트 상태 업데이트

컴포넌트의 상태를 업데이트 할때는 useState를 이용해서 상태를 관리했었다.

useState외에도 useReducer를 이용해서 상태 업데이트를 할 수 있다.

🥊 useState vs useReducer

✏️ useState

설정하고 싶은 다음 상태를 직접 지정해주는 방식이다.
ex) setValue(5);

🕹 useReducer

액션이라는 상태를 기반으로 다음 상태를 업데이트 해준다.

상태 업데이트 로직을 컴포넌트 밖을 분리할 수 있다.
즉, 다른 파일로 작성 후 불러올 수 있음

ex) dispatch({type: 'INCREMENT'})

reducer 함수를 먼저 정의해주고,
dispatch로 액션 객체의 type을 지정해주면 된다.

🤔 액션 객체?

업데이트할 때 참조하는 객체로 type이나 diff를 설정해서
어떻게 업데이트를 할지, 어떤 값을 참조할지 정할 수 있다.

const [number, dispatch] = useReducer(reducer,0);
// useReducer(reducer 함수, 기본값)

// number = 현재 상태
// dispatch = action을 발생시키는 함수

🤔 reducer?

상태를 업데이트 하는 함수를 의미한다.

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

counter 예제

import React, {useReducer} from 'react';

// 어떻게 상태를 업데이트할 지 정하는 reducer 함수
function reducer(state, action){
    switch(action.type){
        case 'INCREMENT':
            return state + 1;
        case 'DECREMENT':
            return state - 1;
        default:
            throw new Error('Unhandled action');
    }
}

function Counter() {
   // number 변수의 초기값은 0
   // dispatch를 통해 reducer 함수의 액션을 지정
    const [number, dispatch] = 
          useReducer(reducer, 0);

    const onIncrease = () => {
        dispatch({
            type: 'INCREMENT'
        })
    };
    const onDecrease = () => {
        dispatch({
            type: 'DECREMENT'
        })
    };
    
    return(
        <div>
            <h1>{number}</h1>
            <button onClick={onIncrease}>+1</button>
            <button onClick={onDecrease}>-1</button>
        </div>
    )
}

export default Counter;