useReducer

useReducer는 컴포넌트에 리듀서를 추가할 수 있게 만들어주는 Hook입니다.

이 내용은 리액트의 상태관리와 액션, 리듀서 개념을 이해했음을 가정하고 작성되었습니다.

리듀서를 간결하게 요약하자면, 현재의 상태와 상태 업데이트를 위해 필요한 정보인 액션을 전달받아서 새로운 상태를 만들어주는 함수입니다.

---

useReudcer 사용해보기

버튼을 누르면 숫자가 올라가는 간단한 카운터 컴포넌트를 만들면서 useReducer의 사용법을 알아보겠습니다.

useReducer는 리듀서 함수와, 초기 상태(또는 상태)를 인자로 받아서, 현재 상태와 상태를 변경할 수 있는 dispatch를 반환하게 됩니다.

아래 코드는 리듀서 함수를 정의해보고 컴포넌트에서 useReducer를 통해 리듀서 함수와 초기 state를 전달하는 코드입니다.

import React, {useReducer} from 'react';

function reducer(state, action) {} //리듀서 함수 정의

const CountUp = () => {
  const [state, dispatch] = useReducer(reducer, { value: 0 }); //useReducer 사용
};

export default CountUp;

버튼을 누르면 앱이 동작할 것이므로 버튼에 등록할 dispatch로 액션을 발생시키기 위한 핸들러 함수를 하나 정의합니다.

const CountUp = () => {
  const [state, dispatch] = useReducer(reducer, { value: 0 });

  const handleClick = () => dispatch({type: 'increase_count'});

  return (
    <>
      <h2>{state.value}</h2>
      <button onClick={() => {
        dispatch({type: 'increase_count'})
      }}>+</button>
    </>
  );
};

그 다음으로 실제 액션을 발생시킬 리듀서 함수 내부의 내용을 작성합니다.

function reducer(state, action) {
  if (action.type === 'increase_count') {
    return (
      {value: state.value + 1}
    );
  }
}

리듀서를 정의하고, 동작에 등록했으니 이제 버튼을 클릭하면 dispatch로 액션을 발생시킨 후 해당 액션에 등록된 동작을 수행하게됩니다.

완성된 컴포넌트의 전체 코드입니다.

import React, {useReducer} from 'react';

function reducer(state, action) {
  if (action.type === 'increase_count') {
    return (
      {value: state.value + 1}
    );
  }
}

const CountUp = () => {
  const [state, dispatch] = useReducer(reducer, { value: 0 });

  const handleClick = () => dispatch({type: 'increase_count'});

  return (
    <>
      <h2>{state.value}</h2>
      <button onClick={() => {
        dispatch({type: 'increase_count'})
      }}>+</button>
    </>
  );
};

export default CountUp;