[React] useReducer

🔎 useReducer란?

React의 Hook 중 하나로, 복잡한 상태 로직을 관리하는 데 사용된다. useReducer는 현재 상태와 상태를 변경하기 위한 '액션'을 받아서 새로운 상태를 반환하는 함수이다.

💡 useState vs useReducer

useState와 useReducer는 모두 React에서 상태를 관리하는 Hook이지만, 각각 다른 특성과 용도를 가지고 있다.

useState

• 간단한 상태 관리에 적합 (단일 값이나 간단한 객체)
• 직관적이고 사용하기 쉬움
• 상태 변경 로직이 컴포넌트 내부에 직접 위치
• 여러 상태가 독립적일 때 적합

useReducer

• 복잡한 상태 로직 관리에 적합 (여러 필드가 있는 객체)
• 상태 변화의 예측 가능성을 높이고, 관련 로직을 한 곳에 모을 수 있음
• 상태 변경 로직을 컴포넌트 외부로 분리 가능
• 여러 상태 업데이트가 서로 연관되어 있을 때 유용
• 상태 변화 히스토리 추적이 용이
• 테스트하기 쉬운 순수 함수로 상태 로직 관리

💡 useReducer의 기본 구문

const [state, dispatch] = useReducer(reducer, initialState);

• state : 현재 상태 값
• dispatch : 액션을 발생시키는 함수
• reducer : 현재 상태와 액션을 받아 새로운 상태를 반환하는 함수
• initialState : 초기 상태 값

💡 useReducer의 초기화 함수(Init Function)

useReducer는 선택적으로 세 번째 매개변수를 받을 수 있다.

const [state, dispatch] = useReducer(reducer, initalArg, init);

여기서 init은 초기 상태를 계산하는 함수이다. 이를 통해 초기 상태 생성 로직을 분리하고 재사용할 수 있다.

// 초기화 함수
function init(initialCount) {
	return { count: initialCount };
}

// 사용 예시
const [state, dispatch] = useReducer(reducer, 0 , init);

이 패턴은 초기 상태가 복잡한 계산이 필요하거나, 이전 상태를 리셋하는 액션이 있을 때 유용하다.

💡 reducer 함수 이해하기

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

이 함수는 두 가지 매개변수를 받는다.
1. state : 현재 상태
2. action : 어떤 변화를 일으킬지 나타내는 객체 (일반적으로 type 속성을 포함)
reducer 함수는 항상 새로운 상태 객체를 반환해야 하며, 원본 상태를 직접 수정해서는 안된다.

📚 useReducer 활용 예시

import React, { useReducer } from 'react';

// reducer 함수 정의
function reducer(state, action) {
	switch (action.type) {
		case 'INCREMENT':
			return { count: state.count + 1 };
		case 'DECREMENT':
			return { count: state.count - 1 };
      	case 'RESET':
        	return { count: 0 };
		default:
			return state;
    }
}

function Counter() {
	// useReducer 사용
  	const [state, dispatch] = useReducer(counterReducer, { count: 0 });
  
  	return (
    	<div>
      		<h1>카운트: {state.count}</h1>
			<button onClick={() => dispatch({ type: 'INCREMENT' })}>증가</button>
			<button onClick={() => dispatch({ type: 'DECREMENT' })}>감소</button>
			<button onClick={() => dispatch({ type: 'RESET' })}>리셋</button>
      	</div>
    );
}