useReducer 사용

사용하는 이유?

컴포넌트에서 상태 변화 코드를 쉽게 분리할 수 있다.

상태 변화 코드 = State값을 변경하는 코드

 

useReducer기본 사용법

1.

 import{useReducer} from "react";

2.

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

const [ count, dispatch] = count->state 변수 dispatch->상태 변화 촉발 함수

useReducer (reducer,0) = 생성자(상태 변화 함수, 초깃값)

 

dispatch = 인수로 객체 전달, 이 객체는 State의 변경 정보를 담음 , 다른 말로 action 객체라고도 함

dispatch({type:"DECREASE", data:1})

type 프로퍼티 : 어떤 상황이 발생했는지 알려줌

data 프로퍼티 : 상태 변화에 필요한 값

 

 

실제 상태 변화는 함수 reducer에서 일어남

 

 

useReducer가 반환하는 dispatch를 호출하면(+버튼을 누르면) useReducer는 함수 reducer를 호출(컴포넌트 외부에 작성), reducer가 반환하는 값이 State를 업데이트.

 

 

function reducer(state, action) {
    switch (action.type){
        case "INCREASE":
            return state + action.data;
        case "DECREASE":
            return state - action.data;
        default:
            return state;
    }
}

reducer의 2개의 매개변수 

1. 현재 State값 (여기서는 0)

2. dispatch 함수를 호출하면서 인수로 전달한 action 객체 (위의 {type : "DECREASE", data :1}

 

함수 reducer가 반환하는 값이 새로운 State값이 됨