🚀 React 상태 관리와 라우팅

✅ 1️⃣ React 상태 관리(State Management)란?
✅ 2️⃣ React에서 상태를 관리하는 방법 (useState, useReducer, Context API, Redux, Zustand 등)
✅ 3️⃣ React 라우팅(Routing) 개념 및 react-router-dom 활용
✅ 4️⃣ 상태 관리와 라우팅을 결합하여 효율적인 웹 애플리케이션 개발

---

1️⃣ React 상태 관리(State Management)란?

🔹 상태(State)란?

• React 컴포넌트 내에서 데이터를 저장하고 변경하는 값
• 컴포넌트가 리렌더링될 때 변경된 데이터가 반영됨
• 상태 관리란 앱 전반에서 상태를 효과적으로 저장하고 변경하는 방식을 의미

📌 예제 (useState 사용)

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

✅ useState를 사용하여 상태를 변경하고 화면을 업데이트할 수 있음

---

2️⃣ React에서 상태를 관리하는 방법

🔹 1. useState (기본 상태 관리)

✅ 컴포넌트 내부에서 간단한 상태를 관리할 때 사용
📌 예제 코드

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

✅ useState는 로컬 상태 관리에 적합하지만, 여러 컴포넌트에서 공유되는 상태 관리에는 불편함

---

🔹 2. useReducer (복잡한 상태 관리)

✅ 컴포넌트 내에서 복잡한 상태를 다룰 때 사용 (Redux와 유사한 패턴)
📌 예제 코드

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:
      return state;
  }
}

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;

✅ 상태 변경 로직을 reducer 함수로 관리하여 가독성이 좋아짐

---

🔹 3. Context API (전역 상태 관리)

✅ 여러 컴포넌트에서 상태를 공유할 때 사용 (전역 상태 관리)
📌 예제 코드

import { createContext, useContext, useState } from "react";

const ThemeContext = createContext();

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState("light");
  
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

function ThemeSwitcher() {
  const { theme, setTheme } = useContext(ThemeContext);
  return (
    <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
      현재 테마: {theme}
    </button>
  );
}

export default function App() {
  return (
    <ThemeProvider>
      <ThemeSwitcher />
    </ThemeProvider>
  );
}

 

✅ Context API를 사용하면 prop drilling 없이 전역 상태를 공유할 수 있음

---

🔹 4. Redux (대규모 애플리케이션 전역 상태 관리)

✅ 복잡한 상태를 체계적으로 관리할 때 사용
✅ 액션(Action) → 리듀서(Reducer) → 상태(State) 구조
📌 예제 코드 (redux-toolkit 기반)

import { createSlice, configureStore } from "@reduxjs/toolkit";
import { Provider, useDispatch, useSelector } from "react-redux";

const counterSlice = createSlice({
  name: "counter",
  initialState: { count: 0 },
  reducers: {
    increment: (state) => { state.count += 1; },
    decrement: (state) => { state.count -= 1; },
  }
});

const store = configureStore({ reducer: { counter: counterSlice.reducer } });

function Counter() {
  const count = useSelector((state) => state.counter.count);
  const dispatch = useDispatch();

  return (
    <div>
      <p>카운트: {count}</p>
      <button onClick={() => dispatch(counterSlice.actions.increment())}>+</button>
      <button onClick={() => dispatch(counterSlice.actions.decrement())}>-</button>
    </div>
  );
}

export default function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

 

✅ Redux는 상태를 중앙에서 관리하고, 여러 컴포넌트에서 쉽게 접근 가능

---

3️⃣ React 라우팅 (Routing) 개념 및 활용

✅ React에서 페이지 이동을 관리하는 방식
✅ react-router-dom을 사용하여 클라이언트 측 라우팅 적용

📌 설치 방법

npm install react-router-dom

 

📌 기본 사용법 (App.js)

import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";

function Home() {
  return <h1>Home Page</h1>;
}

function About() {
  return <h1>About Page</h1>;
}

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">홈</Link>
        <Link to="/about">소개</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

export default App;

✅ 클라이언트 사이드 라우팅을 사용하여 페이지 이동 시 전체 새로고침 없이 빠른 탐색 가능!

---

4️⃣ 상태 관리와 라우팅을 결합하여 효율적인 웹 애플리케이션 개발

💡 로그인 상태를 활용한 페이지 보호

📌 로그인 여부에 따라 페이지 접근 제한 (Private Route 구현)

import { Navigate, Outlet } from "react-router-dom";

function PrivateRoute({ isAuthenticated }) {
  return isAuthenticated ? <Outlet /> : <Navigate to="/login" />;
}

export default function App() {
  const isAuthenticated = false; // 예제 (실제 사용 시 상태 연동)

  return (
    <Routes>
      <Route path="/login" element={<LoginPage />} />
      <Route element={<PrivateRoute isAuthenticated={isAuthenticated} />}>
        <Route path="/dashboard" element={<Dashboard />} />
      </Route>
    </Routes>
  );
}

✅ 로그인 상태(isAuthenticated)가 false이면 LoginPage로 이동

---

🎯 마무리: React 상태 관리 & 라우팅 정리

✅ 상태 관리 (useState, useReducer, Context API, Redux)
✅ 라우팅 (react-router-dom으로 페이지 이동 관리)
✅ 상태 관리와 라우팅을 결합하여 로그인 상태에 따른 페이지 접근 제어

🔥 이제 상태 관리와 라우팅을 활용하여 실전 React 프로젝트를 만들어 보자! 🚀