useReducer

useReducer

• useState의 대체 함수로, 하나의 컴포넌트에서 여러 개의 state를 다룰 때 사용
  
• (state, action) => newState의 형태로 reducer를 받고 dispatch 메서드와 짝의 형태로 현재 state를 반환
  initalState에 넣어준 값 === state의 초기값, dispatch() = reducer(_,action)
• dispatch()는 상태값 변경 함수와 마찬가지로 변하지 않는 값이기에 useEffect(effect)의 의존성 배열에 입력해줄 필요가 없기에 의존성 배열의 사용을 줄이고 싶을 때 useReducer의 사용이 적절
  
  React는 dispatch 함수의 동일성이 안정적이고 리렌더링 시에도 변경되지 않으리라는 것을 보장합니다. 이것이 useEffect나 useCallback 의존성 목록에 이 함수를 포함하지 않아도 괜찮은 이유입니다.

import React,{useState,useEffect,useReducer} from 'react';

export default function App () {
    return (
        <Counter />
    )
}

//주어진 시간을 시/분/초로 환산 후 1초씩 남은 시간이 줄어드는 타이머
const initialState = {count: 100};

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

참고 : https://ko.reactjs.org/docs/hooks-reference.html#usecontext