React UI Playground

상태 관리

Context ／ Zustand ／ Redux Toolkit

추천

Zustand

짧게 쓸 수 있고 Provider로 감싸는 수고도 없습니다. 자주 바뀌지 않는 값이라면 라이브러리를 설치하지 않고 Context로도 충분합니다

결과 비교

같은 것을 각 라이브러리로 만들었습니다. 직접 만져 보세요.

Context

Zustand

Redux Toolkit

코드 비교

코드를 고치면 오른쪽 미리보기가 바로 바뀝니다.

import { createContext, useContext, useState } from "react"
import { CartHeader, ProductRow, Shell } from "./ui"

const CartContext = createContext({ count: 0, add: () => {} })

function Header() {
  const { count } = useContext(CartContext)
  return <CartHeader count={count} />
}

function Product({ name }: { name: string }) {
  const { add } = useContext(CartContext)
  return <ProductRow name={name} onAdd={add} />
}

export default function App() {
  const [count, setCount] = useState(0)
  const add = () => setCount(count + 1)

  return (
    <CartContext.Provider value={{ count, add }}>
      <Shell>
        <Header />
        <Product name="상품 A" />
        <Product name="상품 B" />
      </Shell>
    </CartContext.Provider>
  )
}

비교

2026년 10월 기준

Context

공식 사이트 ↗

특징

React에 내장되어 있습니다. Provider로 감싸서 값을 나눠 주고 useContext로 읽습니다. 값이 바뀌면 읽고 있는 곳이 모두 다시 렌더링됩니다

이럴 때 좋아요

로그인한 사용자나 다크 모드 설정처럼 자주 바뀌지 않는 값을 공유할 때

Zustand

추천공식 사이트 ↗

특징

지금 인기 있는 라이브러리입니다. create로 값과 값을 바꾸는 방법을 한곳에 모아 어디서든 쓸 수 있습니다. Provider가 필요 없고 코드도 짧습니다

이럴 때 좋아요

추천. 장바구니 속 상품처럼 자주 바뀌는 값을 공유할 때

Redux Toolkit

공식 사이트 ↗

특징

오래된 Redux를 짧게 쓸 수 있게 해 주는 도구입니다. 규칙이 많아서 여러 사람이 함께 만들어도 쓰는 방식이 맞춰집니다

이럴 때 좋아요

회사에서 이미 Redux를 쓰고 있는 코드를 유지보수할 때. 여러 사람이 큰 앱을 만들 때