상태관리 3

전역 상태 관리 라이브러리는 왜 사용하나요?

전역 상태 관리 라이브러리, 왜 쓸까요? 🤔안녕하세요! 오늘은 프론트엔드 개발을 하면서 한 번쯤 고민해봤을 전역 상태 관리 라이브러리에 대해 이야기해보려고 해요.1. 컴포넌트 간 상태 공유가 쉬워져요! 🔄Props Drilling의 지옥에서 탈출 😵‍💫일반적인 React 개발을 하다 보면 이런 상황을 만나게 돼요:할아버지 컴포넌트 → 아버지 컴포넌트 → 아들 컴포넌트 → 손자 컴포넌트사용자 정보를 손자 컴포넌트에서 써야 하는데, 중간에 있는 아버지와 아들 컴포넌트는 그 정보가 전혀 필요 없어요. 하지만 props로 계속 전달해야 하죠. 마치 택배를 전달하는 중간 배송기사들처럼요! 📦전역 상태 관리를 쓰면? 손자 컴포넌트가 직접 창고(전역 스토어)에서 필요한 물건을 가져올 수 있어요.실생활 예시 ..

Zustand의 개념 및 기능 정리

Zustand: 간단하고 강력한 상태 관리 라이브러리 🐻Zustand는 React에서 사용하기 쉬운 상태 관리 라이브러리입니다. Redux의 복잡성 없이 단순하면서도 강력한 기능을 제공합니다.1. create 함수 (콜백 set, get) 🛠️Zustand의 핵심은 create 함수로, 상태와 그 상태를 변경하는 액션을 정의합니다.import { create } from 'zustand';interface BearState { bears: number; increasePopulation: () => void;}const useBearStore = create((set, get) => ({ bears: 0, increasePopulation: () => set({ bears: get().bear..

상태관리 라이브러리 Zustand의 기본 개념과 기능

🐻 Zustand, 뭐하는 친구야?안녕하세요! 리액트를 사용하다 보면 상태 관리를 고민하게 되죠?Context API, Redux… 복잡하다고 느끼셨다면 ✋“작고, 빠르고, 정말 간단한 상태관리 라이브러리” → Zustand를 소개합니다!✅ Zustand는 이런 라이브러리예요가볍고 빠른 상태관리Redux보다 훨씬 코드가 짧고 심플Context API 없이도 전역 상태를 공유할 수 있음React 전용, TypeScript도 잘 지원💡 언제 써야 할까?여러 컴포넌트에서 전역 상태를 공유해야 할 때로그인 상태, 다크모드, 장바구니, 토글 상태 등을 관리할 때Context API가 불편하거나 깊은 구조에서 쓰기 힘들 때🛠️ 자주 쓰는 명령어/기능명령어/기능 설명create()상태 스토어 생성 함수 (Zus..