[React] 상태관리 Redux vs Zustand (ft. 마키마 ? 레제 ? )

상태관리 ?

• 리액트에서 상태란 useState 를 통해 관리를 함
• 문제는 useState 발생마다 리렌더링이 동작 , 상태 공유가 복잡해짐 , 성능 저하
• useState 만으로는 상태관리가 어렵다 판단하여 등장한 전역 상태관리 도구

Redux (지배의 악마)

• 구조적이고 강력한 상태관리 툴
• 액션 , 리듀서 , 디스패치 , 미들웨어 등등 기능이 다양함 (오히려 이게 요즘 단점)
• 상태관리를 편하게 하고자 쓰는 기술이 오히려 더 복잡해지는 경우가 존재
• 상태 추적 가능
• 너무 많은 기능에 오히려 통제가 강함

Zustand (시골쥐)

• 기존 상태관리 툴에서 복잡한 기능들 제거 , 가벼운 툴로 등장
• Hook 을 활용하여 직관적임
• useStore 로 set , get 모두 가능
• 코드가 짧고 직관적임
• 상태 추적에선 불리
• 미들웨어 같은 작업은 지원 안 함

Redux vs Zustand

항목	Redux	Zustand
철학	구조적이고 명시적인 설계 방식	직관적이고 자유로운 설계 방식
코드 스타일	보일러플레이트가 많음	Hook 기반, 간결한 코드 구조
학습 난이도	높음 (러닝커브 존재)	낮음 (간단한 API)
코드 양	많고 장황함	적고 간단함
DevTools 지원	기본 제공	별도 설정 필요
미들웨어 지원	공식/서드파티 미들웨어 다양	커스텀 구현 위주
상태 추적	시간여행 디버깅 등 추적 기능 우수	추적 기능 제한적
성능 최적화	직접 최적화 필요 (e.g. memo 등)	shallow 비교 등 내장 최적화
커뮤니티/자료	매우 큼 (풍부한 자료 존재)	작지만 빠르게 성장 중
프로젝트 규모	대규모 프로젝트에 적합	소~중규모 프로젝트에 적합

실무에선?

• 제가 하는 프로젝트에선 zustand 를 통해 로그인 정보 , 권한 정보 , 마스터 테이블 공통 코드 등을 담아놓고 화면마다 권한이 필요한 특정 기능들을 보이게 또는 안 보이게 , 로그인 정보를 통한 로그 , 공통 코드 데이터 호출 등을 하는 형식으로 많이 사용합니다 .

• 무조건 zustand 를 쓰진 않습니다 , 시스템이 과거에 만들어졌거나 제작된 시스템의 틀에서 큰 수정이 필요 없는 경우 Redux 를 사용하는 경우도 많습니다

• 속도가 중요한 경우 Zustand , 시스템이 많이 복잡한 경우 Redux 사용을 많이합니다.