[React] 10. react-hooks(useReducer)

useReducer 는 useState 보다 컴포넌트에서 더 다양한 상황에 따라 다양한 상태를 다른 값으로 업데이트해주고 싶을 때 사용하는 Hook 입니다.
reducer는 Redux를 공부할 때 도움이 되니 조금 알아보도록 하겠습니다.

리듀서는 현재 상태와, 업데이트를 위해 필요한 정보를 담은 액션(action) 값을 전달 받아 새로운 상태를 반환하는 함수입니다. 리듀서 함수에서 새로운 상태를 만들 때는 꼭 불변성을 지켜주어야 합니다.

전에 만들었던 버튼 클릭 시 count가 증가하는 예제를 변경해서 진행하겠습니다.

기존 Count.js

import React, { useState, useEffect } from "react";
export const Count = () => {
      //useState를 사용
  const [count, setCount] = useState(0);
  const add = () => {setCount(count+1);}
  const min = () => {setCount(count-1);}
  useEffect(() => {
    console.log('마운트 될 때만 실행됩니다.');
  }, []);
  return (
    <div>
      <p>Current COUNT : {count}</p>
  	  <button onClick={add}>+</button>
      <button onClick={min}>-</button>
    </div>
  )
}
export default Count;

변경 된 Count.js

import React, { useEffect, useReducer } from "react";
function eventReducer(state, action) {  // state : 기존 state값, action : dispatch 인자값
    // action.type 에 따라 다른 작업 수행
    switch (action.type) {
      case 'ADD':
        return { count: state.count + 1 };
      case 'MINUS':
        return { count: state.count - 1 };
      default:
        // 아무것도 해당되지 않을 때 기존 상태 반환
        return state;
    }
  }
export const Count = () => {
  //useReducer를 사용
  const [state, dispatch] = useReducer(eventReducer, { count: 0 });
  const add = () => {dispatch({type : 'ADD'})}
  const min = () => {dispatch({type : 'MINUS'})}
  useEffect(() => {
    console.log('마운트 될 때만 실행됩니다.');
  });
  return (
    <div>
      <p>Current COUNT : {state.count}</p>
  	  <button onClick={add}>+</button>
      <button onClick={min}>-</button>
    </div>
  )
}
export default Count;

useReducer 의 첫번째 파라미터는 리듀서 함수이름(eventReducer) , 그리고 두번째 파라미터는 해당 리듀서의 기본 값을 넣어줍니다.
reducer를 사용 했을 때 state값과 action을 받아오게 되는데, 여기서 state는 현재 가르키고 있는 state이고, action은 dispatch에서 보낸 인자 값으로 보면 됩니다.

공부에 도움된 사이트 : https://velog.io/@velopert/react-hooks