Context에서 Redux, Zustand까지: React 상태 관리의 새로운 시대

Source: Dev.to

위 링크에 포함된 전체 텍스트를 제공해 주시면, 해당 내용을 한국어로 번역해 드리겠습니다. (코드 블록, URL 및 마크다운 형식은 그대로 유지됩니다.)

The State‑Management Landscape in React

React의 변화하는 세계에서 상태 관리(state management)는 언제나 핵심 과제였습니다. 개발자들은 처음에 Context API를 활용해 prop drilling을 피했으며, 이후 Redux를 도입해 엄격한 패턴과 엔터프라이즈 수준의 예측 가능성을 얻었습니다.

하지만 현대 애플리케이션이 속도, 단순성, 유연성을 요구함에 따라 새로운 경쟁자가 등장했습니다: Zustand. 이 가벼운 라이브러리는 훅(hooks)의 효율성, 최소한의 코드 명료성, 그리고 오늘날 React 생태계에 필요한 확장성을 제공하며 개발자들의 상태 관리 방식에 변화를 일으키고 있습니다.

What Is Zustand?

Zustand는 React와 Next.js용 현대적인 상태 관리 라이브러리로, 작고(small), 빠르며(fast), 단순(simple) 하는 데 초점을 맞춥니다. 독일어로 “state”(상태)를 의미하며, 로고는 최소한의 노력으로 강인함을 상징하는 곰 🐻 입니다.

Why Zustand Is a Trend Now

In short: Zustand는 능력이 부족한 것이 아니라, 단지 더 새롭고, 마케팅이 적으며, Redux의 역사적 지배와 Context의 내장 상태에 가려졌을 뿐입니다.

🔑 핵심 기능

• Hooks‑based API – create() 로 스토어를 생성하고 커스텀 훅을 통해 접근합니다.
• Minimal boilerplate – 리듀서, 액션, 혹은 Redux와 같은 복잡한 설정이 필요 없습니다.
• Performance‑optimized – 사용 중인 상태의 특정 슬라이스가 변경될 때만 컴포넌트가 다시 렌더링됩니다.
• Scalable – 작은 앱부터 대규모 프로젝트까지 복잡성을 추가하지 않고 사용할 수 있습니다.
• Unopinionated – Redux의 엄격한 패턴과 달리 상태를 원하는 방식으로 구조화할 수 있습니다.

📦 설치

npm install zustand
# or
yarn add zustand

⚡ 기본 예제 (Zustand)

import { create } from "zustand";

const useStore = create(set => ({
  blogs: [],
  fetchBlogs: async () => {
    const res = await fetch("/api/blogs");
    const data = await res.json();
    set({ blogs: data });
  }
}));

function BlogList() {
  const blogs = useStore(state => state.blogs);
  const fetchBlogs = useStore(state => state.fetchBlogs);

  React.useEffect(() => {
    fetchBlogs();
  }, [fetchBlogs]);

  return (
    

      {blogs.map(blog => (
        - {blog.title}

      ))}
    

  );
}

Redux

Redux는 오랫동안 React에서 상태를 관리하는 “클래식” 솔루션으로 자리 잡아 왔습니다. 중앙 집중식 스토어와 액션·리듀서의 엄격한 흐름에 의존해 상태를 예측 가능하게 만들고 디버깅을 쉽게 합니다. 생태계가 성숙해 복잡한 애플리케이션을 지원하는 고급 도구와 미들웨어가 풍부합니다.

Advantages

• 명확하고 일관된 상태 흐름.
• 뛰어난 디버깅 및 개발자 도구.
• 대규모 프로젝트에서 검증된 신뢰성.

Drawbacks

• 설정과 보일러플레이트 코드가 더 많이 필요합니다.
• 최신 라이브러리와 비교했을 때 학습 곡선이 가파릅니다.
• 작은 애플리케이션에서는 무겁게 느껴질 수 있습니다.

📦 Installation

npm install @reduxjs/toolkit react-redux
# or
yarn add @reduxjs/toolkit react-redux

⚡ Basic Example (Redux)

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

// Async thunk for fetching blogs
const fetchBlogs = createAsyncThunk("blogs/fetchBlogs", async () => {
  const res = await fetch("/api/blogs");
  return await res.json();
});

const blogSlice = createSlice({
  name: "blogs",
  initialState: { items: [], status: "idle" },
  reducers: {},
  extraReducers: builder => {
    builder
      .addCase(fetchBlogs.pending, state => {
        state.status = "loading";
      })
      .addCase(fetchBlogs.fulfilled, (state, action) => {
        state.status = "succeeded";
        state.items = action.payload;
      })
      .addCase(fetchBlogs.rejected, state => {
        state.status = "failed";
      });
  }
});

const store = configureStore({ reducer: { blogs: blogSlice.reducer } });

function BlogList() {
  const blogs = useSelector(state => state.blogs.items);
  const status = useSelector(state => state.blogs.status);
  const dispatch = useDispatch();

  React.useEffect(() => {
    dispatch(fetchBlogs());
  }, [dispatch]);

  if (status === "loading") return 
Loading...
;
  if (status === "failed") return 
Error loading blogs
;

  return (
    

      {blogs.map(blog => (
        - {blog.title}

      ))}
    

  );
}

export default function App() {
  return (
    
      
    
  );
}

Context API

Context API는 React에 내장된 메커니즘으로, props를 일일이 전달하지 않아도 컴포넌트 간에 데이터를 공유할 수 있습니다. React 자체에 포함되어 있기 때문에 별도의 라이브러리를 설치할 필요가 없습니다. 개발자들은 주로 테마, 인증, 사용자 설정과 같은 전역 값을 관리할 때 사용합니다.

강점

• React에 기본 포함되어 있어 외부 라이브러리가 필요 없습니다.
• 배우고 구현하기 매우 쉽습니다.
• UI 설정이나 로그인한 사용자 정보와 같은 간단한 전역 상태에 이상적입니다.

제한 사항

• 많은 컴포넌트가 동일한 컨텍스트를 사용할 때 불필요한 재렌더링을 일으킬 수 있습니다.
• 고급 디버깅이나 미들웨어 지원을 제공하지 않습니다.
• 복잡하거나 대규모 상태 로직을 위해 설계되지 않았습니다.

⚡ 기본 예제 (Context API)

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

const BlogContext = createContext();

function BlogProvider({ children }) {
  const [blogs, setBlogs] = useState([]);

  useEffect(() => {
    // Simulate fetching blogs
    fetch("/api/blogs")
      .then(res => res.json())
      .then(data => setBlogs(data));
  }, []);

  return (
    
      {children}
    
  );
}

function BlogList() {
  const { blogs } = useContext(BlogContext);
  return (
    

      {blogs.map(blog => (
        - {blog.title}

      ))}
    

  );
}

export default function App() {
  return (
    
      
    
  );
}

올바른 도구 선택

핵심 요점: 작은 앱에는 Context API만으로 충분합니다. 성능과 단순함이 중요한 중간 규모 프로젝트에서는 Zustand가 빛을 발합니다. 그리고 대규모 복잡한 애플리케이션에서는 Redux가 검증된 핵심 엔진으로 남아 있습니다.

Light approach with minimal boilerplate and efficient updates, making it a favorite among developers building fast, flexible apps.

For large, enterprise‑level applications, Redux remains the most reliable option. Its strict patterns, powerful devtools, and mature ecosystem make it ideal for managing complex state flows at scale.