React / useState() VS useReducer() 비교 정리

 

 

useState( )

 

- 가장 단순하고 직관적인 상태 관리법이다.

- 컴포넌트 내부의 간단한 상태(Single State)를 관리할 때 사용하는 훅이다.

- 상태값과 상태를 바꾸는 함수(setter)를 제공한다.

 

특징

 

- 직관적이고 사용이 쉽다.

- 상태 업데이트 로직이 컴포넌트 안에 존재한다.

- 상태 변경은 setter에 새로운 값 또는 데이트 함수를 넘겨서 수행한다.

// useState 예시
 
const [count, setCount] = useState(0);
 
function increment() {
    setCount(count => count + 1); 
    // count 라고 붙인 이름에 어떤 이름을 붙여도 상관없다.
    // prev 라고 해도되고 , count라고 해도 된다.
}

 

언제 사용할까?

 

- 상태가 단순할 때 사용한다.

- 하나의 값만 관리하면 될 때 사용한다.

- 업데이트 로직이 단순할 때 사용한다.

 

 useReducer( )

 

- 여러 상태를 묶거나, 상태 변경 로직이 복잡할 때 사용하는 훅이다.

- state와 dispatch(action)을 사용해 상태를 업데이트한다.

- Redux의 축소판이라고 보면 된다.

 

특징

 

- 상태 변경 로직을 reducer 함수에 집중시킨다.

- 업데이트 코드가 명확하게 구조화된다.

- 상태 변경이 액션 기반으로 이루어진다.

import {useReducer} from 'react';
 
const reducer = (state, action) => {
    if(action.type === 'INCREASE'){
        return state + action.data;
    }else if(action.type === 'DECREASE'){
        return state - action.data;
    }
}
 
const Exam = () => {
 
    const [state, dispatch] = useReducer(reducer, 0);
 
    const onClickPlus = () => {
        dispatch({
            type: "INCREASE",
            data: 1,
        });
    }
 
    const onClickMinus = () => {
        dispatch({
            type: "DECREASE",
            data: 1,
        });
    }
 
    return(
        <div>
            <h1>{state}</h1>
            <button onClick = {onClickPlus}>+</button>
            <button onClick = {onClickMinus}>-</button>
        </div>
    );
}
 
export default Exam;

 

언제 사용할까?

 

- 상태가 여러 개일때

- 상태 변경 로직이 많아지며, 분리하고 싶을 때

- 컴포넌트에서 로직을 분리해 정리하고 싶을 때 

 

정리

 

- React에서 상태 관리는 상황에 따라 적절한 훅을 선택하는 것이 중요하다.

- 상태가 단순하고 변경 로직이 간단할 때는 useState가 가장 적합하다.

- 하지만 상태가 여러 개이거나 업데이트 로직이 복잡해지고, 컴포넌트의 단일 크기가 커진다면

- useReducer로 전환하는 것이 더 구조적이고 유지보수가 쉽다.

- 특히 useReducer는 action 구조를 통해 로직이 명확하게 드러나므로 규모가 있는 컴포넌트에서 강력하다!!