반응형
React에서 reducer는 상태 관리를 위한 중요한 개념입니다. Redux 라이브러리에서 유래했지만, React의 useReducer Hook을 통해 React 자체에서도 사용할 수 있게 되었습니다. Reducer의 주요 역할과 특징을 설명해드리겠습니다.
- 상태 관리:
Reducer는 애플리케이션의 상태를 관리합니다. 특히 복잡한 상태 로직을 다룰 때 유용합니다. - 예측 가능한 상태 변화:
Reducer는 현재 상태와 액션을 받아 새로운 상태를 반환하는 순수 함수입니다. 이는 상태 변화를 예측 가능하고 일관되게 만듭니다. - 중앙화된 상태 로직:
여러 컴포넌트에 걸쳐 사용되는 복잡한 상태 로직을 한 곳에서 관리할 수 있게 해줍니다. - 디버깅 용이성:
상태 변화가 reducer 함수 내에서 일어나기 때문에, 상태가 어떻게 변하는지 추적하기 쉽습니다. - 테스트 용이성:
Reducer는 순수 함수이기 때문에 테스트하기 쉽습니다.
useReducer Hook을 사용한 간단한 예제를 통해 reducer의 사용법을 보여드리겠습니다:
import React, { useReducer } from 'react';
// Reducer 함수 정의
function counterReducer(state, action) {
switch (action.type) {
case 'INCREMENT':
return { count: state.count + 1 };
case 'DECREMENT':
return { count: state.count - 1 };
default:
return state;
}
}
function Counter() {
// useReducer 사용
const [state, dispatch] = useReducer(counterReducer, { count: 0 });
return (
<div>
Count: {state.count}
<button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
<button onClick={() => dispatch({ type: 'DECREMENT' })}>-</button>
</div>
);
}이 예제에서 reducer는 'INCREMENT'와 'DECREMENT' 액션에 따라 상태를 변경합니다.
dispatch 함수를 통해 액션을 보내면 reducer가 이를 처리하여 새로운 상태를 만들어냅니다.
Reducer를 사용하면 복잡한 상태 로직을 더 체계적으로 관리할 수 있으며, 특히 여러 상태 값이 서로 연관되어 있거나 복잡한 상태 변화 로직이 필요한 경우에 유용합니다.
JavaScript의 이벤트 처리와 다른 점
React에서의 이벤트 처리는 일반 JavaScript와 조금 다릅니다. React에서의 이벤트 처리와 reducer의 연결에 대해 더 자세히 설명해 드리겠습니다.
- React의 이벤트 처리:
React에서는 DOM 요소에 직접 이벤트 리스너를 추가하지 않습니다. 대신, JSX에서 onClick과 같은 속성을 사용하여 이벤트 핸들러를 지정합니다. - 이벤트와 Reducer의 연결:
버튼 클릭 이벤트가 발생하면, 이벤트 핸들러 함수가 실행됩니다. 이 함수 내에서 우리는 'dispatch' 함수(위 예제에서는 '요청하기' 함수)를 호출합니다. 이 dispatch 함수가 reducer와 연결되어 있습니다. - useReducer Hook:
useReducer Hook이 dispatch 함수와 reducer를 연결해줍니다. 이 Hook은 reducer 함수와 초기 상태를 인자로 받아, 현재 상태와 dispatch 함수를 반환합니다.
import React, { useReducer } from 'react';
function bankReducer(현재잔액, 요청) {
switch (요청.종류) {
case '입금':
return 현재잔액 + 요청.금액;
case '출금':
return 현재잔액 - 요청.금액;
default:
return 현재잔액;
}
}
function 은행계좌() {
const [잔액, dispatch] = useReducer(bankReducer, 1000); // 초기 잔액 1000원
// 이벤트 핸들러 함수들
const 입금하기 = () => {
dispatch({ 종류: '입금', 금액: 100 });
};
const 출금하기 = () => {
dispatch({ 종류: '출금', 금액: 100 });
};
return (
<div>
<h2>현재 잔액: {잔액}원</h2>
<button onClick={입금하기}>100원 입금</button>
<button onClick={출금하기}>100원 출금</button>
</div>
);
}
- useReducer Hook이 bankReducer와 초기 상태를 연결합니다.
- 버튼의 onClick 속성에 이벤트 핸들러 함수(입금하기, 출금하기)를 지정합니다.
- 이벤트 핸들러 함수 내에서 dispatch를 호출하여 reducer에 액션을 전달합니다.
- reducer가 이 액션을 받아 새로운 상태를 계산하고 반환합니다.
- React가 이 새로운 상태로 컴포넌트를 다시 렌더링합니다.
이렇게 React의 선언적 방식과 useReducer Hook의 사용으로, 이벤트 처리와 상태 관리가 자연스럽게 연결됩니다. 일반 JavaScript에서처럼 직접 이벤트 리스너를 추가하고 상태를 변경하는 대신, React의 방식을 따라 더 예측 가능하고 관리하기 쉬운 코드를 작성할 수 있습니다
반응형