[React] useState, useReducer hook

본 글은 리액트에서 사용하는 hooks 중 useState, useReducer에 대해 다룬 내용입니다.

 

목차

차이점

useState란?

useReducer란?

 

차이점

	useState	useReducer
용도	단순한 상태관리	복잡한 상태관리
인터페이스	하나의 상태 값, 그 값을 변경하는 함수 반환	리듀서와 디스패치 함수 반환
가독성과 유지 보수성	직관적이라서 단순한 상태 관리에 적합 코드 가독성을 향상	복잡한 상태 업데이트 로직 분리 가능, 유지 보수성 향상 액션에 따라 상태가 변경되어야 하는 경우

 

간단히 정리하면,

useState는 단순한 상태 관리에 사용, 간단한 컴포넌트에서 유용,

useReducer는 복잡한 상태 관리에 사용, 상태 업데이트 로직 분리가 가능해 코드 가독성과 유지 보수성 향상 가능

 

 

useState란?

함수형 컴포넌트에서 상태(state)를 관리할 수 있게 해주는 hook,

컴포넌트의 동적인 동작과 상호작용을 가능하게 해준다.

• 동적인 동작: 사용자 상호 작용 또는 외부 이벤트에 따라 변화하는 것
• 정적인 동작: 프로그램이 처음 실행될 때 이미 결정되고 변하지 않는 것

import React, { useState } from "react";

function MyComponent() {
  const [state, setState] = useState("기본 값");

  return (
    <div>
      <p>현재 상태: {state}</p>
      <button onClick={() => setState("새로운 값")}>상태 변경</button>
    </div>
  );
}

export default MyComponent;

 

useReducer란?

함수형 컴포넌트에서 상태(state)를 관리할 수 있게 해주는 hook,

주로 복잡한 상태 관리 로직을 다룰 때 사용된다.

 

여러 액션을 처리하고, 관련 로직을 리듀서 함수에서 중앙 집중화하여 상태 관리할 수 있다는 특징이 있다.

 

이를 통해 예측 가능하고 일관되게 작동시킬 수 있다. (그래서 복잡한 상태 관리에 용이!)

 

// 1. 리듀서 함수 정의
// 상태(state)와 액션(action)을 받아 새로운 상태를 반환
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();
  }
}

// 2. 호출 및 사용
import React, { useReducer } from "react";

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
}

export default Counter;

 

마무리

오늘은 useState, useReducer에 대해 알아봤습니다.

 

프로젝트 진행할 때 useState만으로도 충분했어서 useReducer를 사용하지 않았었다.

이번에 useReducer에 대해 공부하면서 앞으로 복잡한 상태 관리할 때 적극적으로 사용해야겠다고 생각하게 되었다. 

 

예를 들면 관리해야 할 상태가 많은데 서로 관련이 있는 경우에 useReducer를 도입하면 useState로만 관리할 때 보다 가독성과 유지 보수성이 좋아질 거 같다!