React - useReducer

useReducer

useState보다 복잡한 로직을 필요로 하는 경우 useReducer라는 react hook을 이용할 수 있습니다. 또한 상태관리 로직을 컴포넌트에서 분리할 수 있다는 장점이 있습니다(다른 파일에도 작성가능). 먼저 useState를 추가했던 방식과 동일하게 추가해 줍니다.

import React, { Fragment, useReducer } from 'react';

아래 코드는 useState포스트에서 작성한 기능을 useReducer로 변경한 코드입니다. > useState 포스트 <

CounterReducer.js

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

export default function CounterReducer(props) {
  // useReducer(function, initial state);
  const [number, dispatch] = useReducer(reducer, 0);

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

  return (
    <Fragment>
      <Container>
        <CountText>{number}</CountText>
        <ButtonContainer>
          <ClickButton onClick={onIncrease}>+</ClickButton>
          <ClickButton onClick={onDecrease}>-</ClickButton>
        </ButtonContainer>
      </Container>
    </Fragment>
  );
}

위 코드에서 number는 현재 상태, dispatch는 action실행 함수, reducer는 상태 업데이트 로직 함수, 마지막으로 0는 초기값입니다.

1. 버튼 클릭시 onClick 함수를 통해 onIncrease or onDecrease함수 실행.
2. dispatch를 호출하여 type이 담긴 객체 형태를 전달.
3. reducer에 switch문을 통해 사용할 로직 검사.