[React] Hook함수 - useReducer 사용하기

useReducer : 여러 개의 상태를 쉽게 관리하기 위해 사용된다.

 

1. useState와의 차이점

- useState는 설정하고 싶은 상태를 직접 설정하고 지정하여 상태를 업데이트함

- useReducer은 액션(action)객체를 기반으로 상태를 업데이트함

 

2. useState와의 공통점

- useState와 마찬가지로 useReducer도 호출 시 배열이 반환된다.

- useReducer의 반환된 배열의 형태 : [상태, dispatch함수]

 

3. useReducer가 실행되는 순서도

1. dispatch함수 : dispatch가 reducer에게 상태를 요청함 (이 때 dispatch가 요청한 값인 action객체 생성됨)
2. reducer함수 : dispatch가 요청한 action객체를 받아서 상태를 업데이트 하여 반환 (컴포넌트 밖에다 작성 !)
3. dispatch함수 : 상태를 사용할 함수 안에 호출해 reducer의 업데이트 된 action객체를 받아서 상태를 사용한다 

※ reducer함수는 데이터 저장 공간 같은 개념이고, dispatch함수 없이 혼자 사용될 수 없다.

(dispatch가 요청을 해야만 reducer가 처리할 수 있기 때문! 예를들어 dispatch가 은행에 맏긴 돈(= state)을 찾으러 오는 고객이고,

reducer가 고객이 맏긴 돈을 보관하고 있다가 찾아주는 은행같은 개념이다.)

 

※ action 객체에서 type은 필수 속성이다 ! 그 외에 따로 지정해주고 싶은 속성이 있다면, 원하는 이름으로 줘도 상관 없다.

 

 

구문 > 

// reducer 함수 : 매개변수로는 상태와 action객체를 받아줌
// state에는 상태변수의 상태의 초기 값이 자동으로 담겨져있다!
function reducer(state, action) {
    // 여러 action객체에 따라 상태를 업데이트 할 조건문 작성(if문 / switch문)
    // action객체의 type이라는 key이름으로 접근(이 때, key이름은 마음대로 지정 가능)
    switch(action.type) {
        case 'case1': // case1일 때 
            return state + 1; // 업데이트 된 상태를 반환
        defualt: // 어느 케이스도 해당되지 않을 때
        	return state; // 상태의 초기값을 반환
    }
}

cosnt MyComponent = () {
    const [상태변수, dispatch함수] = useReducer(reduce함수, 상태의 초기값);
    // reduver함수를 호출하기 위해 dispatch로 요청해야 한다.
    const myFun () => {
        // 이 때, dispatch함수 호출 시 reducer함수의 action객체를 받아옴
        // dispatch에서는 case에 적은 조건만 쓸 수 있다 !
        dispatch({
            type: case1
        })
    }
}

 

예제 - useReducer를 이용해 초간단 todolist 만들기 >