[카카오테크 부트캠프] useState와 useReducer를 이용한 상태 관리

useState

함수형 컴포넌트에서 상태를 관리하기 위한 훅입니다.

• 사용 방법: 상태 변수와 해당 상태를 갱신할 수 있는 함수를 제공받아 사용합니다.
• 장점: 간단하고 직관적으로 컴포넌트의 상태를 관리할 수 있으며, 여러 개의 상태를 독립적으로 관리할 수 있습니다.

import { useState } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);
  const increment = () => {
    setCount(count + 1);
  };
  
  return (
    <div>
      <p>카운트: {count}</p>
      <button onClick={increment}>증가</button>
    </div>
    );
  };
  
export default Counter;

useReducer

함수형 컴포넌트에서 복잡한 상태 관리 로직을 처리하기 위한 훅으로, 상태를 업데이트하는 로직을 더 세밀하게 제어할 수 있습니다.

• 사용 방법: 현재 상태와 상태를 업데이트하는 액션을 처리하는 리듀서 함수를 받아 사용합니다.
• 장점: 복잡한 상태 관리 로직을 구현할 때 유용하며, 다양한 액션에 따라 상태를 변경할 수 있습니다.

useReduce의 Flux 패턴

• 액션(Action): 상태의 변화를 설명하는 객체입니다. 액션은 상태 변경의 이벤트를 나타냅니다.
• 디스패처(Dispatcher): 액션을 리듀서로 전달하는 역할을 합니다.
• 리듀서(Reducer): 현재 상태와 액션을 받아 새로운 상태를 반환합니다.

useReducer을 사용하는 이유

• 복잡한 상태 관리
  • useState는 단순한 상태 값만 관리할 수 있지만, useReducer는 복잡한 상태 로직을 다루기에 적합합니다.
  • 상태와 그 상태를 업데이트하는 로직을 하나의 리듀서 함수로 관리할 수 있습니다.
  • 이는 애플리케이션 규모가 크거나 상태 관리가 복잡한 경우 유용합니다.
• 컴포넌트 로직 분리
  • useReducer는 상태와 업데이트 로직을 하나의 단일 객체로 관리하기 때문에, 컴포넌트의 UI 로직과 분리할 수 있습니다.
  • 이로 인해 컴포넌트가 더 간결해지고 재사용성이 증가합니다.
• 순수 함수 리듀서
  • 리듀서 함수는 순수 함수로 작성되어야 하며, 이전 상태를 변경하지 않고 새로운 상태를 반환해야 합니다.
  • 이는 함수의 예측 가능성과 테스트 용이성을 높이며, 버그를 줄이는 데 도움을 줍니다.

순수 함수

• 동일한 입력에 대해 항상 동일한 결과를 반환
• 함수의 실행이 외부 환경에 영향을 미치지 않음
• 결과를 반환하는 것 외에는 아무런 일도 하지 않음

import { 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();
  }
}

const Counter = () => {
  const [state, dispatch] = useReducer(reducer, initialState);
  
  return (
    <div>
      <p>카운트: {state.count}</p>
      <button onClick={() => dispatch({ type: "increment" })}>증가</button>
      <button onClick={() => dispatch({ type: "decrement" })}>감소</button>
    </div>
  );
};

export default Counter;