Next.js 기초 <10. Next.js 15에서 상태 관리 (React Context, Redux, Zustand, SWR 비교)>

넥스트 Next.js

10. Next.js 15에서 상태 관리 (React Context, Redux, Zustand, SWR 비교) 

 

안녕하세요! 태마입니다.

Next.js 기초 강좌입니다.

 

강좌의 경우 

1. 주제 간단 정리

2. 상세 주제 정리

으로 이루어져 있습니다.

 

넥스트 Next.js

포스팅 시작하겠습니다 :)

---

 

1. 주제 간단 정리

 

1. Next.js 15에서 상태 관리가 필요한 이유

Next.js 애플리케이션이 커질수록 컴포넌트 간의 데이터 공유와 상태 관리가 중요해진다.
Next.js 15에서는 React 기본 상태 관리 기능(useState, useReducer, Context API) 외에도
Redux, Zustand, SWR, React Query 같은 상태 관리 라이브러리를 활용할 수 있다.

📌 Next.js 15에서 사용 가능한 상태 관리 방식
✔ useState / useReducer → 컴포넌트 내 개별 상태 관리
✔ React Context API → 전역 상태 관리 (간단한 상태 공유)
✔ Redux (RTK) → 복잡한 전역 상태 관리 (대규모 프로젝트에 적합)
✔ Zustand → 가볍고 직관적인 상태 관리 (Redux보다 간편)
✔ SWR / React Query → 서버 상태 관리 및 데이터 패칭 최적화

✅ 상태 관리 방식 비교

상태 관리 방식설명장점단점추천 사용 예시

useState	로컬 상태 관리	✅ 간단함	❌ 전역 상태 관리 불가능	단순한 UI 상태
Context API	글로벌 상태 공유	✅ React 내장 기능	❌ 성능 최적화 필요	사용자 인증, 다크 모드
Redux (RTK)	복잡한 상태 관리	✅ 대규모 앱에 적합	❌ 보일러플레이트 코드 많음	대형 애플리케이션
Zustand	간편한 전역 상태 관리	✅ 가볍고 빠름	❌ 미들웨어 기능 부족	상태 공유가 필요한 경우
SWR / React Query	서버 상태 관리	✅ 캐싱 및 자동 업데이트	❌ 클라이언트 전역 상태 관리 불가	데이터 패칭 및 캐싱

📌 Next.js 15에서는 "React Context + Zustand" 또는 "React Query + Zustand" 조합이 많이 사용됨!

---

2. Next.js 15에서 상태 관리 방식 적용하기

✅ 1) useState로 간단한 상태 관리 (app/components/Counter.tsx)

"use client";
import { useState } from "react";

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

  return (
    <div>
      <h2>카운터: {count}</h2>
      <button onClick={() => setCount(count + 1)}>+1 증가</button>
    </div>
  );
}

📌 useState는 컴포넌트 내부에서만 상태를 관리할 때 사용!

✅ 2) Context API로 글로벌 상태 관리 (app/context/ThemeContext.tsx)

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

const ThemeContext = createContext({ theme: "light", toggleTheme: () => {} });

export function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [theme, setTheme] = useState("light");
  const toggleTheme = () => setTheme(theme === "light" ? "dark" : "light");

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

export function useTheme() {
  return useContext(ThemeContext);
}

📌 Context API를 활용하여 테마(다크 모드 등)를 글로벌 상태로 관리 가능!

✅ 3) Redux를 활용한 상태 관리 (app/store.ts)

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

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

export const { increment, decrement } = counterSlice.actions;

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

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

📌 Redux Toolkit(RTK)을 사용하여 전역 상태를 효율적으로 관리 가능!

 

---

✅ 여기까지 Next.js 15에서 상태 관리 방법 (useState, Context API, Redux, Zustand, SWR)을 적용하는 방법을 배웠습니다!
👉 "그렇다면, Next.js 15에서 실제 프로젝트에서 상태 관리 방식을 어떻게 선택해야 할까?"
✅ 2부에서 Next.js 15에서 각 상태 관리 방법의 실전 적용 사례를 배워봅시다!

반응형

---

 

2. 상세 주제 정리

 

1. Zustand로 간편한 전역 상태 관리 (app/store/useCounter.ts)

import { create } from "zustand";

interface CounterState {
  count: number;
  increment: () => void;
}

export const useCounter = create<CounterState>((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

📌 Zustand는 Redux보다 간결하고 사용하기 쉬운 상태 관리 라이브러리!

✅ Zustand 상태 활용 (app/components/ZustandCounter.tsx)

"use client";
import { useCounter } from "@/store/useCounter";

export default function ZustandCounter() {
  const { count, increment } = useCounter();

  return (
    <div>
      <h2>Zustand 카운터: {count}</h2>
      <button onClick={increment}>+1 증가</button>
    </div>
  );
}

📌 Zustand를 활용하면 useState처럼 간편하게 전역 상태 관리 가능!

---

2. SWR을 활용한 서버 상태 관리 (app/components/SWRExample.tsx)

✅ SWR 설치

$ npm install swr

📌 SWR을 설치하면 클라이언트에서 데이터를 효율적으로 패칭하고 관리할 수 있음!

✅ SWR을 활용한 데이터 패칭 (app/components/SWRExample.tsx)

"use client";
import useSWR from "swr";

const fetcher = (url: string) => fetch(url).then((res) => res.json());

export default function SWRExample() {
  const { data, error, isLoading } = useSWR("/api/data", fetcher);

  if (isLoading) return <p>로딩 중...</p>;
  if (error) return <p>에러 발생: {error.message}</p>;

  return (
    <div>
      <h2>📡 서버 데이터:</h2>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

📌 SWR을 활용하면 자동 캐싱, 갱신, 집중화(fetch deduplication) 등이 가능하여 성능을 최적화할 수 있음!

✅ 여기까지 Next.js 15에서 상태 관리 방법 (React Context, Redux, Zustand, SWR)을 적용하는 방법을 배웠습니다!
👉 "그렇다면, Next.js 15에서 다국어(i18n) 및 다이나믹 로컬라이제이션은 어떻게 적용할까?"
✅ 다음 회차에서 Next.js 15에서 다국어 지원 및 다이나믹 로컬라이제이션을 배워봅시다!