6장 상태 관리

1. 상태 관리 개요

전역 상태 관리는 프로그램 내에서 사용자 정보, 환경 설정 등 공통 데이터를 관리하는 체계임
React는 컴포넌트 간 데이터 전달을 props로 하기 때문에 전역적으로 공유할 값은 상위 컴포넌트(state)에서 관리하는 경우가 많음

구분	설명
state	컴포넌트 내부에서 관리되는 지역 상태
props	부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터

2. Context API

Context API는 React에서 전역 데이터를 전달할 수 있는 공식 기능
작은 규모의 앱이나 단순한 전역 데이터를 다룰 때 적합
useContext() Hook을 통해 데이터 접근

개념	설명
Provider	Context 값을 하위 컴포넌트에 전달
Consumer	Context 값을 읽는 컴포넌트 (useContext)

3. Redux

Redux는 대규모 애플리케이션에서 전역 상태를 체계적으로 관리하기 위한 라이브러리
Redux Toolkit은 Redux 사용을 더 쉽게 해주는 공식 도구

주요 개념

개념	설명
slice	createSlice()로 정의된 상태 조각. 상태, 리듀서 포함
state	Redux Store에 저장되는 전역 상태 객체
action	상태 변경을 유발하는 객체. 주로 type과 payload 속성 포함
reducer	상태와 액션을 받아 새로운 상태를 반환하는 함수
dispatch	액션을 스토어에 전달해 상태를 변경하는 트리거 함수. useDispatch()로 사용
useSelector	스토어의 상태를 컴포넌트에서 조회할 때 사용하는 Ho

npm install @reduxjs/toolkit react-redux

`main.jsx`


import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App.jsx";
import { Provider } from "react-redux";

import { CounterContextProvider } from "./contexts/CounterContext.jsx";
import { UserContextProvider } from "./contexts/UserContext.jsx";
import store from "./store.js";

createRoot(document.getElementById("root")).render(
  <StrictMode>
    {/* Context Provider로 감싸서 App 하위 모든 컴포넌트에 컨텍스트를 제공 */}
    <UserContextProvider>
      <CounterContextProvider>
        <Provider store={store}>
          <App />
        </Provider>
      </CounterContextProvider>
    </UserContextProvider>
  </StrictMode>
);