React] Hook : useReducer

useReducer

단순히 state 값을 저장하는 것이 아니라,

state를 바꾸기 위한 로직, 함수 등을 관리할 수 있는데, 이럴 때 useReducer를 사용하면 관리에 용이합니다.

간단히 말해 state를 바꾸기 위한 여러 함수들을 하나로 묶어서 관리할 수 있다고 보면 됩니다.

const [state, dispatch] = useReducer(reducer, initialState);

 

하나의 state에 dispatch를 통해 값을 변환해 줍니다.

(dispatch가 setState역할을 한다고 보면 될 듯싶습니다.)

 

• state : 컴포넌트에서의 state
• dispatch: action을 발생하는 함수 (setState와 비슷)
• reducer : reducer 정의
• initialState : 초기값

 

 

---

 

 

reducer

function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
}

// state = state + 1; 대입금지

 

반드시 switch로 사용해야 되는 것은 아니나 일반적으로 사용하는 부분입니다.

case별 action은 정의해서 사용하면 됩니다.

state는 읽기 전용임으로 강제로 값을 넣어주는 행위는 하면 안 된다.

 

 

---

 

 

dispatch

 const onIncrease = () => {
    dispatch({ type: 'INCREMENT' });
  };

 

type규칙에 따라 진행되는 것이 일반적입니다.

switch의 조건으로 사용될 값을 넣어주면 됩니다.

 

 

---

 

 

예

 

+1 또는 -1 버튼을 누르게 되면 이벤트가 발생하게 되고,

발생한 이벤트에 따라 dispatch를 통해 reducer에 정의된 action이 실행되게 된다,

 

 

---

 

 

useState와 useReducer 비교

useState

 

useReducer

 

위에서 예로 들었던 소스를 useState로 바꿔서 비교해 봤습니다.

useReducer로 할 수 있는 건 useState로도 할 수 있고, 그 반대도 가능합니다.

 

 

---

 

 

개발자 판단하에 어떤 state에 어떤 hook을 사용할지 정해서 개발하면 됩니다.
그때그때 상황에 따라 다르기 때문에...
둘 다 사용해 보고, 본인에게 맞거나 코드 관리 차원, 가독성을 보면서 정하면 될 듯싶습니다.

 

 

2023.06.06 - [Front-End/React] - Hook) useState