[React] useReducer

DongHyeon Jung·2022년 10월 12일

React

목록 보기

11/15

useReducer

What is useReducer hook

컴포넌트에 state를 관리하고 생성하기 위해서 지금까지 useState를 사용해왔다
하지만 useReducer는 useState를 대체할 수 있는 hook이다
useState보다 더 복잡한 상태관리를 위한 hook이라고 할 수 있다
useReducer는 reducer, dispatch, action 이렇게 3가지로 구성되어 있다

예를 들어보자

const reducer = (state, action) => {
  console.log('calling reducer...', state, action);
  switch (action.type) {
    case ACTION_TYPE.deposit:
      return state + action.payload;
    case ACTION_TYPE.withdraw:
      return state - action.payload;
    default:
      return state;
  }
};

function App() {
  const [number, setNumber] = useState(0);
  // reducer => state: money, action: dispatch
  const [money, dispatch] = useReducer(reducer, 0);

  return (
    <div className="container">
      <h1>Practice useReducer</h1>
      <p>잔고: {money}원</p>
      {money >= 0 ? null : alert("You can't withdraw any money")}
      <input
        type="number"
        value={number}
        onChange={e => setNumber(parseInt(e.target.value))}
        step="1000"
      />
      <button
        onClick={() => dispatch({ type: ACTION_TYPE.deposit, payload: number })}
      >
        deposit
      </button>
      <button
        onClick={() =>
          dispatch({ type: ACTION_TYPE.withdraw, payload: number })
        }
      >
        withdraw
      </button>
    </div>
  );
}

useReducer hook

첫번째 인자인 reducer 함수가 반환하는 값
state를 갱신하는 역할을 한다.

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

예시의 0은 initial state값을 의미한다

Reducer function

컴포넌트 외부에서 state를 업데이트하는 로직을 담당하는 함수
reducer함수는 인자로 state와 action을 인자로 받게 된다
이때 state는 useReducer의 state로 들어오고,
action은 dispatch 함수의 인자가 들어오게 된다

Dispatch

state를 업데이트하라는 요구
dispatch 함수는 reducer함수를 실행시킴
reducer함수의 두번째 인자로 action을 이용한다
예시에서 action은 dispatch의 인자 { type: ... payload: .. } 이다.

Action

요구의 내용, 업데이트를 위한 정보
dispatch의 인자

dispatch({ type: "decrement" })

이렇게 type이라는 객체 형태로 전달받게 된다
위의 예시 코드에선 type, payload가 들어있다

{ type: ACTION_TYPE.withdraw, payload: number }

정리

철수가 거래내역이라는 state를 업데이트하려면
요구라는 dispatch에 만원을 출금해달라는 action을 은행이라는 reducer에 전달함
은행(reducer)은 action의 내용대로 복잡한 state를 변경할 수 있다

When we use useReducer?

이렇게 복잡한 state를 다루어야 할 때 사용한다

useState와 다르게 컴포넌트 외부에 state update logic 로직이 있다

Why we use useReducer?

useReducer를 사용하는 이유는 컴포넌트 밖으로 state 업데이트 로직을 분리시키는 데에 있다 => "컴포넌트의 최적화"

useState vs useReducer

useState

state가 1개이거나 단순할 때,
state의 값이 숫자, 불리언 값일 때 사용된다

useReducer

state가 2개 이상이거나 구조가 복잡할 때,
스케일이 크거나 유동적인 값일 때 사용된다

How to use useReducer?

보통 reducer 함수 안에 if문이나 switch문을 사용한다

const reducer = (state, action) => {
	switch (action.type) {
		case 'deposit':
			return state + action.payload;
		case 'withdraw':
			return state - action.payload;
		default:
			return state;
		}
	};