React - useReducer

앱이 커질수록 상태변수도 많아질 것이고, 일일이 갱신해주는 코드도 많아져서 상태관리가 힘들고 소스가 난잡해질 것이다.

이런 상황에서 useReducer 는 상태들을 한곳에 모아놓고 관리할 수 있게 해주는 훅이다.

예제 )

const initialState = { userInfo : ~ , userList : ~ };

function reducer(state, action){  ---> C
    switch(action.type){
        case 'CHANGE_INPUT':
            return {
                ...state,
                userInfo : {
                    ...state.userInfo,
                    [action.name] : action.value
                }
            };
        default:
            break;
    }

}

function App(){
    const [state, dispatch] = useReducer(reducer, initialState);  ---> A
    const {userList, userInfo} = state;
    
    const onChange = (e)=>{
        const {name, value} = e.target;
        dispatch({  ---> B
            type: 'CHANGE_INPUT',
            name,
            value
        });
}

useReducer 의 선언 형태는 A 와 같고, B를 통해 상태를 업뎃할 함수C를 부르고 C는 상태값을 갱신한다.

 

reducer : dispatch 를 호출하면 수행되는 함수

initialState : 상태변수의 초기값(1개 or 여러 개, 사용할 상태값을 모아놓은 변수)

state : initalState 로 할당된 상태변수

dispatch : reducer 를 호출하는 함수

 

dispatch를 호출하면 reducer 함수가 불린다. 이떄 넘겨주는 파라미터로 type (행위를 정의) 과 필요한 값 넘겨주는데,

어떤 행위를 할지 정의한 객체라해서 action 객체라고 부른다.

(저렇게 type을 포함한 객체를 넘기는건 관행일뿐 개발자 맘대로 어떤값이든 넘겨도됨)

 

reducer 함수는 상태값 state 와 dispatch 에서 넘겨준 action 객체를 인자로 받게되고 switch문에서 type값에 따라 상태값을 갱신해준다.