React useReducer()

useReducer()

const [state, dispatch] = useReducer(reducer/* 함수 */, initialArg/* 초기값 */, init);
// (state, action) => newState의 형태로 reducer를 받음

• React에서 제공하는 Hook 함수 중 하나
• 전역 상태 관리보다는 상태 관리에 더 가까움
• 하지만 전역 상태 관리인 Context API나 Redux와 함께 많이 쓰임
• useState()의 대체 함수
• dispatch()는 객체를 받음
• useState()는 state를 변경하는 set 함수를 반환하고,
  useReducer()는 state를 변경하게 하는 dispatch를 반환
• 현재의 state를 조작하여 반환을 해야할 때나 다음 state가 이전 state에 의존적인 경우 주로 사용

사용 법

1. import useReducer

   import React, { useReducer } from "react";

2. 새로운 useReducer 변수를 선언

   export default function Counter() {
   	/* 이 부분 */
   	const [state, dispatch] = useReducer(reducer, initialState);
   	return (
   		<></>
   	);
   }

3. reducer 함수와 initialState 설정

   const initialState = {count: 0};
   
   function reducer(state, action) {
   	switch (action.type) {
   		case 'increment':
   			return {count: state.count + 1};
   		case 'decrement':
   			return {count: state.count - 1};
   		default:
   			break;
   	}
   }

4. dispatch 값 전달 트리거 작성

   const initialState = {count: 0};
   
   function reducer(state, action) {
   	switch (action.type) {
   		case 'increment':
   			return {count: state.count + 1};
   		case 'decrement':
   			return {count: state.count - 1};
   		default:
   			break;
   	}
   }
   
   export default function Counter() {
   	const [state, dispatch] = useReducer(reducer, initialState);
   	return (
   		<>
   			Count: {state.count}
   			/* 이 부분 */
   			<button onClick={() => dispatch({type: 'decrement'})}>-</button>
   			<button onClick={() => dispatch({type: 'increment'})}>+</button>
   		</>
   	);
   }