[React] useReducer 정리

※ useReducer

  -  Reducer는 function 밖에서도 사용 가능

 

※ useReducer를 쓰는 이유

  - 전역의 데이터가 외부 요인에 따라 함부로 변경되면 안되기 때문에 구조적으로 데이터값을 관리하면서 변경하도록 강제하는 시스템적인 틀

 

 

※ useReducer에서 중요한 개념

  - dispatch(전달자) : state 정보 값에 변경요청을 전달해주는 전달자 (금고관리 직원)
  - reducer (변형자) : dispatch로 전달받은 요청에만 반응해 전역 데이터를 변경해주는 변경자 (창구직원)
  - action (변경내용) : dispatch로 전달요청을 보낼 때 변경사항이 담겨있는 특별한 객체 {type : '변경방법' , payload : '변경할 데이터'} (계좌입금 용지)

 

※ 최종정리

- dispatch가 action 객체를 가지고 변경 요청을 보내면 reducer는 action객체의 타입에 따라 같이 전달된 payload값으로 기존 전역 state를 변경 

 

※사용 순서

1. 전역데이터를 변경해주는 규칙을 가지고 있는 변형자 함수 생성
   보통은 switch 문을 사용을 많이 한다고 함.

예제)

const reducer = (state, action) => {
    // if (action.type === 'minus') return state - action.payload;
    // if (action.type === 'plus') return state + action.payload;
    // else return state;

    switch (action.type) {
        case 'minus':
        	return state - action.payload;
        case 'plus':
        	return state + action.payload;
        default:
        	return state;
    }
};

2. 변형자 함수와 초기값을 인수로 전달 받아서 전역 State와 전달자 함수를 생성해주는 useReducer 호출
   -  const [초기값으로 만들어진 전역 State , 해당 State 변경하기 위한 action 객체 전달함수] = useReducer(변형함수 , 초기값)

 

예제)

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

3. 이벤트 발생시 useReducer로 활성화 시킨 dispatch 함수로 액션객체 Reducer에 전달

 

예제)

<button onClick={() => dispatch({ type: 'minus', payload: 1 })}>minus</button>
<button onClick={() => dispatch({ type: 'plus', payload: 1 })}>plus</button>