Zustand 왜 쓸까

예시로 다크모드 기능을 만든다고 가정해보겠습니다.

먼저, 버튼을 통해 테마를 변경할 수 있어야 합니다.
App.tsx에서 상태를 이렇게 관리할 수 있습니다.

const [theme, setTheme] = useState<"light" | "dark">("light");

const toggleTheme = () => {
  if (theme === "light") {
    setTheme("dark");
  } else {
    setTheme("light");
  }
};

하나의 상태 변수로 현재 테마를 관리하고,
버튼을 통해 테마를 변경할 수 있도록 만든 것입니다.

스타일도 테마에 따라 분기해줍니다.

${({ theme }) =>
  theme === "dark"
    ? css`
        background:
          radial-gradient(circle at 15% 10%, rgba(100, 149, 237, 0.2), transparent 30%),
          radial-gradient(circle at 85% 80%, rgba(72, 61, 139, 0.35), transparent 34%),
          linear-gradient(160deg, #0b1020 0%, #131a2e 45%, #0a1022 100%);
        color: #eef3ff;
      `
    : css`
        background:
          radial-gradient(circle at 15% 10%, rgba(126, 162, 255, 0.2), transparent 32%),
          radial-gradient(circle at 85% 80%, rgba(148, 201, 255, 0.22), transparent 34%),
          linear-gradient(160deg, #eff4ff 0%, #dbe9ff 48%, #f5f8ff 100%);
        color: #15203c;
      `}

---

문제 발생

이제 문제가 생깁니다.

다크모드는 앱 전체에 적용되기 때문에
여러 컴포넌트에서 theme을 사용해야 합니다.

그래서 이런 식으로 props를 내려주게 됩니다.

<Main theme={theme} toggleTheme={toggleTheme} />
<UserDetail theme={theme} toggleTheme={toggleTheme} />

그리고 Header에서도 버튼을 만들고 싶다면?

export default function Header({ theme, toggleTheme }) {
  ...
}

결국 구조는 이렇게 됩니다.

App → Main → Header
App → UserDetail → Header

---

Props Drilling

이처럼 여러 단계를 거쳐 상태를 전달하는 것을
Props Drilling이라고 합니다.

문제는:

• 필요 없는 컴포넌트까지 props를 전달해야 하고
• 구조가 복잡해지고
• 유지보수가 어려워집니다

---

그래서 Zustand를 쓴다

이럴 때 사용하는 것이
전역 상태 관리 라이브러리 (Zustand, Redux 등) 입니다.

Zustand를 사용하면

• 어디서든 상태를 직접 가져올 수 있고
• props를 계속 넘길 필요가 없으며
• 코드가 훨씬 단순해집니다

즉,

“여러 컴포넌트에서 공유해야 하는 상태”가 생기면
Zustand 같은 전역 상태 관리가 필요해지는 것입니다.