React - useReducer란?

useReducer

useState처럼 상태를 업데이트할 수 있습니다. 차이점으로는 useState는 다음 상태를 직접 지정하지만,
useReducer는 액션이라는 객체를 기반으로 상태를 바꾸어줍니다.

useReducer 선언하기

import React, { useReducer } from "react";

const [number, dispatch] = useReducer(reducer, 0);

number는 현재 상태값, dispatch는 액션을 발생시키며 reducer에는 함수를, 0에는 초기값을 나타냅니다.

useReducer 사용하기

useReducer(function, dependencies);

function에는 실행할 함수를, dependencies에는 의존할 값을 나타냅니다.

function reducer(state, action) { switch (action.type) { case "INCREMENT": return state + 1; case "DECREMENT": return state - 1; default: throw new Error("Unhandled action"); } }

useReducer를 사용하기 위해 함수를 만들어줍니다. 두개의 인자를 받는데 state는 상태값, action은 발생시킬 값을 선언해줍니다.

import React, { useReducer } from "react"; function reducer(state, action) { switch (action.type) { case "INCREMENT": return state + 1; case "DECREMENT": return state - 1; default: throw new Error("Unhandled action"); } } function Counter() { const [number, dispatch] = useReducer(reducer, 0); const onIncrease = () => { dispatch({ type: "INCREMENT", }); }; const onDecrease = () => { dispatch({ type: "DECREMENT", }); }; return ( <div> <h1>{number}</h1> <button onClick={onIncrease}>+1</button> <button onClick={onDecrease}>-1</button> </div> ); } export default Counter;

이제 만든 reducer 함수를 useReducer에 담고 초기값을 0으로 선언합니다.
그리고 dispatch를 활용하여 객체의 프로퍼티에 대한 값을 명시해주면 해당 값에 대한 reducer 함수가 리턴되면서 값이 출력됩니다.
이처럼 컴포넌트 외에서 상태를 관리하는 것을 확인할 수 있습니다.

출처: https://tigger.dev/entry/React-useReducer-Hooks-알아보기 [개발 여행]