상태 관리

상태 관리는 앱에서 데이터(상태)를 효율적으로 관리하고, 그 데이터가 변경될 때 UI를 자동으로 업데이트하도록 돕는 시스템이다. 상태 관리는 작은 앱부터 큰 프로젝트까지 꼭 필요한 개념이다. 상태의 예시에는 로그인 상태, 유저 정보, UI 상태, 페이지 이동 조건 등이 있다.

 

상태 관리의 필요성

1. 데이터 흐름 관리 : 여러 컴포넌트가 동일한 데이터를 공유해야 할 때, 그 데이터를 한 곳에서 관리하면 편리해진다. 예를 들어, 유저가 로그인하면, 헤더, 프로필 페이지, 대시보드 등 여러 컴포넌트가 유저 정보를 공유해야 한다.

2. 상태 변경에 따른 UI 업데이트 : 상태가 바뀌면, 자동으로 화면에 반영된다. 예를 들어, 장바구니에 상품 추가 시 바로 수량과 가격 표시가 갱신되어야 한다.

 

상태 관리 방식

1. Local State : 각 컴포넌트 내부에서만 관리하는 상태. useState (React 기본 기능) 사용.

예시

import React, { useState } from "react";

const Counter = () => {
  const [count, setCount] = useState(0); // 로컬 상태
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
};

 

2. Global State : 여러 컴포넌트가 공유하는 데이터. 전역으로 상태를 관리하면 복잡한 데이터 흐름이 깔끔해진다. React Context API 또는 Redux와 같은 외부 상태 관리 라이브러리 사용.

예시

// Counter.js
import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { increment, decrement, incrementByAmount } from "./store";

const Counter = () => {
  // 상태 가져오기
  const count = useSelector((state) => state.counter.value);
  // 상태 변경 함수
  const dispatch = useDispatch();

  return (
    <div>
      <h1>Redux Counter</h1>
      <p>Count: {count}</p>
      <button onClick={() => dispatch(increment())}>+1</button>
      <button onClick={() => dispatch(decrement())}>-1</button>
      <button onClick={() => dispatch(incrementByAmount(5))}>+5</button>
    </div>
  );
};

export default Counter;

 

3. 서버 상태(Sever State) : 서버에서 데이터를 가져오거나 저장할 때 관리하는 상태. React Query, SWR 등을 사용함.