useReducer()

🔥함수형 컴포넌트 기반으로 정리를 했습니다!

 

상태 관리를 수행하기 위해 사용되는 Hook

 

useState와 비슷하지만 좀 더 복잡한 상태 로직을 다룰 때 유용하다.

주로 여러 상태 값이 서로 연관되어 있는 경우나, 상태 전이 로직이 복잡한 경우에 활용된다.

 

// 기본형
const [state, dispatch] = useReducer(reducer, initialState);

reducer 함수는 현재 상태와 액션(상태를 업데이트하는 데 사용되는 정보를 가진 객체)을 받아서 새로운 상태를 반환한다.

dispatch 함수에 상태 변경을 위한 액션을 전달하면 자동으로 reducer에 액션을 전달하고 실행한다.

 

// 사용 예제 => 카운터 함수

import React, { useReducer } from 'react';

// reducer 함수
const counterReducer = (state, action) => {
	switch (action.type) {
		case 'INCREMENT':
			return { count: state.count + 1 };
		case 'DECREMENT':
			return { count: state.count - 1 };
		default:
			return state;
    }
};

const Counter = () => {
	// useReducer 사용
	const [state, dispatch] = useReducer(counterReducer, { count: 0 });

	return (
		<div>
			<p>Count: {state.count}</p>
				<button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
				<button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
		</div>
	);
};

export default Counter;

 

📌 state

• 최신 state 스냅샷

📌 dispatch

• 상태를 업데이트하는 데 사용되는 함수
• 새로운 state값을 설정하는 대신 액션을 디스패치한다.
• 액션은 상태 변경을 나타내는 일종의 객체
• dispatch 함수를 호출하여 액션을 전달함으로써 useReducer는 해당 액션에 따라 상태를 업데이트한다.

📌 reducer

• 상태 업데이트 로직을 담은 함수
• 상태와 액션을 받아서 새로운 상태를 반환하는 함수
• 액션의 타입에 따라 상태를 업데이트하는 로직을 구현한다.
• 2가지 매개변수 받는다.
  첫번째 매개변수 state => 이전 상태
  두번째 매개변수 action => 액션 객체
• switch 문이나 조건문을 사용하여 액션의 종류에 따라 적절한 상태 변화를 처리한다.
  => 처리된 결과인 새로운 상태를 반환한다.
• 기존의 state를 직접 변경하지 않고 새로운 상태를 반환하는 것이 중요하다.
• 상태의 불변성을 유지하고, 상태 변화를 추적하고 디버깅하기 쉽게 로직을 작성한다.
• reducer 함수는 컴포넌트 함수와 분리하여 관리함으로써 코드의 재사용성과 유지보수성이 높다.
• 여러 컴포넌트에서 동일한 상태와 상태 관리 로직을 공유해야 할 경우, reducer 함수를 별도의 모듈로 분리하여 재사용할 수 있다.

📌 initialState

• 초기 state