상태 관리란?

React에서 상태(state)는 컴포넌트의 데이터 및 동작을 정의합니다. 효과적으로 상태를 관리하면 컴포넌트 간의 데이터 흐름을 이해하기 쉬워집니다.

기본적인 상태 관리 (useState)

import React, { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

export default Counter;

고급 상태 관리 (useReducer)

import React, { 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 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;

이처럼 상황에 따라 적합한 상태 관리 방법을 선택해 활용하세요.