[React] useReducer 사용 예제, useState와의 차이점

useReducer란?

 복잡한 상태 관리를 간편하게 처리하기 위해 사용되는 함수이다. useReducer를 사용하면 컴포넌트의 상태를 관리하고 상태를 변경하는 로직을 더 구조적으로 작성할 수 있다.

 

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

state: 현재 상태를 나타내는 값
dispatch: 상태를 변경할 때 사용하는 함수
reducer: 상태를 변경하는 로직이 담긴 함수
initialState: 초기 상태를 설정하는 값

useReducer는 보통 컴포넌트에서 사용할 상태 관리 로직을 별도의 함수인 reducer에서 처리하도록 하는데, 이러한 방식은 상태 관리 로직을 컴포넌트 밖에 둠으로써 코드의 재사용성과 유지보수성을 높인다.

 

useState의 대체 함수로, 다수의 하위 값을 포함하는 복잡한 정적 로직을 만드는 경우나 다음 state가 이전 state에 의존적인 경우 사용 가능하다. useState를 대체한다고 해서 useState를 버리는게 아니라 두개는 서로의 장단점이 존재한다.

 

 

 

import { useEffect, useReducer } from "react";
 
const initialState = { count: 0 };
 
function reducer(state, action) {
    switch (action.type) {
        case 'increment':
            return { count: state.count + 1 };
        case 'decrement':
            return { count: state.count - 1 };
        default:
            throw new Error();
    }
}
 
function Reducer2() {
    const [state, dispatch] = useReducer(reducer, initialState);
 
    useEffect(function () {
        console.log("Reducer2 갱신여부 확인");
    })
 
    return (
        <>
            <h3>Count : {state.count}</h3>
            <button onClick={function () { dispatch({ type: 'increment' }) }}>증가</button>
            <button onClick={function () { dispatch({ type: 'decrement' }) }}>감소</button>
        </>
    )
}
 
export default Reducer2;

initialState로 상태의 초기값 count를 0으로 초기화했다. 그리고 reducer 함수에서 현재 상태와 액션을 받아 액션에 따라 상태를 변경하는 switch 구문을 만들어주었다.

 

Reducer2 컴포넌트를 정의하고, useReducer(reducer, initialState)를 호출해 상태와 디스패치 함수를 받는다.

useEffect를 사용하여 컴포넌트의 렌더링이 발생할 때마다 콘솔 메세지도 출력된다,

 

 

그렇다면, 

useState와 useReducer는 어떤 경우에 각각 사용해야 할까?

• useState

1.   관리해야 할 State가 1개 일 경우
2. State가 단순한 숫자, 문자열 또는 Boolean 값일 경우

• useReducer

1. 관리해야 할 State가 1개 이상, 복수 일 경우
2. 단일 State 값만 관리하고 있지만, 추후 유동적인 가능성이 있는 경우
3. State의 구조가 복잡해질 것으로 보이는 경우