들어가기 전에

useReducer는 Reducer, Dispatch, Action으로 이루어져 있습니다.

만약 여러분이 통장에서 10000원을 출금한다고 가정해봅시다. 이때 사용되는 요소는 나(자신), 은행, 거래내역이 있습니다. 내가 은행에 10000원을 출금해달라고 요청하면 은행이 거래내역을 업데이트하는 방식입니다. 여기서 거래내역이 State입니다. State는 내가 직접 수정하는 게 아닌 은행이 대신 업데이트 해줍니다. 여기서 이 은행을 Reducer라고 합니다. Reducer는 State를 업데이트 해주는 역할을 합니다. State를 변경할 때에는 Reducer을 통해 변경해야 합니다. 마치 내가 은행에 10000원을 출금해달라고 요청한 것처럼요! 여기서 요청하는 행위를 Dispatch라고 합니다. 그리고 10000원을 출금해달라는 요청 내용이 바로 Action이 되는 것입니다.

이제 컴포넌트의 관점에서 봐봅시다. Dispatch라는 함수에 Action이라는 요청 내용을 담고 Reducer에게 전달을 해줍니다. 그러면 Reducer가 컴포넌트의 State를 Action의 내용으로 업데이트 해줍니다.

위에 과정이 이해가 됐다면 이제 본격적으로 useReducer에 대해 알아봅시다.

useReducer 사용

useReducer의 사용법에 대해 알아봅시다.

먼저 money는 새로 정의하는 State입니다. 그리고 useReducer가 만들어주는 dispatch 함수가 들어갑니다. 마지막으로 useReducer는 매개변수를 두 개를 받습니다. 첫 번째 매개변수로는 reducer가 들어옵니다. 그리고 두 번째 매개변수는 money State 안에 들어갈 초기값을 받습니다.

function App() {
	const [number, setNumber] = useState(0);
	const [money, dispatch] = useReducer(reducer, 0);

	return (
		<div>
			<h2>useReducer 은행에 오신 것을 환영합니다.</h2>
			<p>잔고: {money}원</p>
			<input
				type = 'number'
				value = {number}
				onChange = {(e) => setNumber(parseInt(e.target.value))}
				step = "1000"
			/>
			<button>예금</button>
			<button>출금</button>
		</div>
	);
}

export default App;

이제 reducer 함수를 만들어봅시다.

reducer 함수는 두 개의 매개변수를 받습니다. 첫 번째 매개변수로는 현재 State를 받고, 두 번째 매개변수로는 Action을 받습니다.

const reducer = (state, action) => {};

이런식으로 만들어주면 reducer 함수가 불리는 시점에 첫 번째 매개변수로 money State 값이 들어가게 되고, 두 번째 매개변수인 action에는 reducer에게 State를 변경해달라고 요구할 때 그 요구에 대한 내용이 들어갑니다. 이제 전체적인 코드 형태를 봐봅시다.

const reducer = (state, action) => {};

function App() {
	const [number, setNumber] = useState(0);
	const [money, dispatch] = useReducer(reducer, 0);

	return (
		<div>
			<h2>useReducer 은행에 오신 것을 환영합니다.</h2>
			<p>잔고: {money}원</p>
			<input
				type = 'number'
				value = {number}
				onChange = {(e) => setNumber(parseInt(e.target.value))}
				step = "1000"
			/>
			<button>예금</button>
			<button>출금</button>
		</div>
	);
}

export default App;