전역 관리 vs 로컬 관리 vs API

📄 React 전역 상태 관리(Redux Toolkit) & API 정리

1️⃣ 전역 상태 vs 로컬 상태

상태 유형사용 조건예시

로컬 상태 (useState)	한 컴포넌트 안에서만 쓰이고, 다른 곳과 공유 X	입력값, 모달 열림/닫힘, 체크박스 상태
전역 상태 (Redux)	여러 컴포넌트/페이지에서 동시에 필요	로그인 사용자 정보, 권한, 선택된 건물, 다크모드 설정

원칙: 여러 페이지/컴포넌트에서 공유되면 전역 상태, 아니면 로컬 상태

---

2️⃣ Redux Toolkit 사용 예시

userSlice.js

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  id: null,
  name: "",
  token: null,
  isLoggedIn: false,
};

const userSlice = createSlice({
  name: "user",
  initialState,
  reducers: {
    setUser: (state, action) => {
      state.id = action.payload.id;
      state.name = action.payload.name;
      state.token = action.payload.token;
      state.isLoggedIn = true;
    },
    clearUser: () => initialState,
  },
});

export const { setUser, clearUser } = userSlice.actions;
export default userSlice.reducer;

 

store/index.js

import { configureStore } from "@reduxjs/toolkit";
import userReducer from "./userSlice";

export const store = configureStore({
  reducer: {
    user: userReducer,
  },
});

---

3️⃣ useSelector로 상태 읽기

import React from "react";
import { useSelector } from "react-redux";

function Profile() {
  const user = useSelector((state) => state.user);

  return (
    <div>
      <h2>프로필 정보</h2>
      <p>ID: {user.id}</p>
      <p>이름: {user.name}</p>
      <p>로그인 여부: {user.isLoggedIn ? "로그인됨" : "로그아웃됨"}</p>
    </div>
  );
}

 

---

4️⃣ 로그인/로그아웃 흐름

userAPI.js

import { setUser, clearUser } from "../store/userSlice";

// 로그인
export const loginUser = (credentials) => async (dispatch) => {
  try {
    const res = await fetch("/api/login", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(credentials),
    });
    if (!res.ok) throw new Error("로그인 실패");
    const data = await res.json();

    localStorage.setItem("token", data.token);  // 새로고침 유지
    dispatch(setUser(data));
  } catch (err) {
    console.error("로그인 에러:", err);
    throw err;
  }
};

// 로그아웃
export const logoutUser = () => async (dispatch) => {
  try {
    await fetch("/api/logout", { method: "POST", credentials: "include" });
  } catch (err) {
    console.warn("로그아웃 에러:", err);
  } finally {
    localStorage.removeItem("token");
    dispatch(clearUser());
  }
};

 

 

---

5️⃣ localStorage와 Redux의 차이

저장소특징사용 목적

Redux store	메모리 기반, 앱 실행 동안만 유지	페이지 전환 시 실시간 참조
localStorage	브라우저에 영구 저장	새로고침 후에도 로그인 유지, 토큰 저장

• 새로고침 시 store는 초기화
• localStorage의 토큰/정보로 store를 재설정하면 로그인 상태 유지 가능

const token = localStorage.getItem("token");
if (token) {
  dispatch(setUser({ id: 1, name: "Moon", token }));
}

 

---

6️⃣ API 호출과 store 업데이트

전역 상태용 데이터

import { useEffect } from "react";
import { useDispatch } from "react-redux";
import { setBuildings, setBuildingError } from "../store/buildingSlice";

function BuildingList() {
  const dispatch = useDispatch();

  useEffect(() => {
    async function fetchBuildings() {
      try {
        const res = await fetch("/api/buildings");
        if (!res.ok) throw new Error("API 호출 실패");
        const data = await res.json();
        dispatch(setBuildings(data));
      } catch (err) {
        console.error("빌딩 리스트 가져오기 실패:", err);
        dispatch(setBuildingError(err.message)); // 오류 상태만 저장
      }
    }
    fetchBuildings();
  }, [dispatch]);
}

요점

1. 여러 컴포넌트에서 공유 → Redux store 업데이트
2. 한 컴포넌트만 필요 → 로컬 state (useState)
3. API 실패 시 store 초기화하지 않고 기존 데이터 유지

---

7️⃣ 핵심 원칙 정리

• 전역 상태는 여러 화면에서 공유되는 중요한 데이터
• API 업데이트 → Redux 업데이트 패턴을 지켜야 일관성 유지
• localStorage + store 연동 → 새로고침 후 로그인 상태 유지
• 로그인: try-catch 필수 (실패 시 앱 진행 불가)
• 로그아웃: JWT 기반이면 단순 토큰 삭제, 세션 기반이면 API + try-catch 필수
• API 실패 시 store 초기화 금지 → 기존 데이터 유지

 

• Redux: 원래 Redux 라이브러리 자체. createStore, combineReducers, dispatch, subscribe 등 기본 API 사용.
• Redux Toolkit(RTK): Redux 공식에서 만든 “현대적인 Redux 사용 패턴” 모음.
  • createSlice → 액션과 리듀서를 한 번에 만들어줌
  • configureStore → 스토어 생성, 미들웨어 설정 등을 간단하게
  • createAsyncThunk → 비동기 API 호출 패턴 내장