useReducer 는 뭔데요 ? 자주 써요?

 

 

useState에 비해 useReducer가 더  복잡하다 (처음 본 체감) ...! 

제미나이에게 물어보니 

useState가 90%라면 나머지를 useReducer라고 한다.

 

 

=> 복잡한 상태관리가 필요할 때 필수적 !! 

 

 

 

---

 

 

import { useReducer } from "react";


//  reducer :  변환기 
// -> 상태를 실제로 변환시키는 변환기 역할 
function reducer(state, action) {
    console.log(state, action);
    if(action.type==="INCREASE"){
        return state+action.data 
    }
    else if(action.type==="DECREASE"){
        return state-action.data 
    }
}

const Exam =()=>{

    // dispatch : 발송하다, 급송하다
    // -> 상태변화가 있어야 한다는 사실을 알리는, 발송하는 함수 
    const [state, dispatch] = useReducer(reducer,0);


    const onClickPlus = ()=>{
        // 인수 : 상태가 어떻게 변화되길 원하는지
        dispatch({
            type:"INCREASE",
            data: 1,
        });
    }

    const onClickMinus = ()=>{
        // 인수 : 상태가 어떻게 변화되길 원하는지
        dispatch({
            type:"DECREASE",
            data: 1,
        });
    }

    return <div>
        <h1>{state}</h1>
        <button onClick={onClickPlus}>+</button>
        <button onClick={onClickMinus}>-</button>
    </div>;
}

export default Exam;

 

 

 

 

---

 

 

 

 // dispatch : 발송하다, 급송하다
    // -> 상태변화가 있어야 한다는 사실을 알리는, 발송하는 함수 
    const [state, dispatch] = useReducer(reducer,0);

 

 

const onClickPlus = ()=>{
        // 인수 : 상태가 어떻게 변화되길 원하는지
        dispatch({
            type:"INCREASE",
            data: 1,
        });
    }

dispatch를 호출하면 상태변화를 알리는 겁니다 ..! 

그안에 객체를 넣어요 . 그 객체를 action 이라고 합니다. 

 

action 안에 type, data를 세팅해둡니다. 

 

 

//  reducer :  변환기 
// -> 상태를 실제로 변환시키는 변환기 역할 
function reducer(state, action) {
    console.log(state, action);
    if(action.type==="INCREASE"){
        return state+action.data 
    }
    else if(action.type==="DECREASE"){
        return state-action.data 
    }
}

 

state에는 초기값 0이 있습니다. (useReducer 의 두번째 인수가 초기값입니다.) 

호출할때 전달했던 action의 type에 따라서 return 값을 state에서 data를 이용해 수정한 값을 return 합니다.