상태관리 [5편]: Redux, Zustand, Tanstack Query — 언제, 무엇을 써야 할까?

🧠 상태 관리 도구, 왜 이렇게 많을까?

프로젝트를 하다 보면 "이건 Redux로?" "Zustand가 더 쉽지 않나?" 같은 고민이 생깁니다.
게다가 서버에서 데이터를 받아오면 Tanstack Query도 써야 한다고? 😵‍💫

1. 도대체 이 도구들은 각각 뭘 하는 건가요?

항목	Redux	Zustand	Tanstack Query
주 역할	전역 상태 관리	간편한 전역 상태 공유	서버 상태 관리 (fetch, cache 등)
비동기 처리	thunk, saga 등 외부 도구 필요	fetch 직접 사용	내장된 자동 처리
캐싱	직접 구현	직접 구현	기본 제공
optimistic UI	수동 구현	수동 구현	지원
개발자 경험	보일러플레이트 많음	간단하고 직관적	서버 상태 처리에 최적화
주요 예시	로그인, UI 상태	모달, 다크모드	게시물, 유저 정보

 

2. 예제로 보면 더 쉽게 이해됨

🔍 유저 정보를 가져오는 3가지 방식

① Tanstack Query (자동 캐싱, 리패치, 로딩/에러 상태 관리)

const { data: user } = useQuery(['user'], fetchUser);

② Redux (thunk, 로딩/에러 상태 직접 구현 필요)

// useEffect 내부에서 dispatch(fetchUser())
const user = useSelector(state => state.user);

③ Zustand (간단하지만 캐싱/로딩 직접 처리)

const user = useUserStore((s) => s.user);
useEffect(() => {
  fetch('/api/user')
    .then(res => res.json())
    .then(setUser);
}, []);

 

3. 언제 어떤 걸 써야 할까?

서버와 통신한 데이터는 Tanstack Query, UI 상태는 Zustand/Redux로 나누는 게 베스트!

전략	설명
Tanstack Query + Zustand	- 서버 상태: Tanstack Query - UI 상태: Zustand 가볍고 빠른 상태 관리 조합
Redux + RTK Query	- 이미 Redux를 쓰고 있다면? - 서버 상태는 RTK Query로 추가 중대형 프로젝트에 안정적

 

4. 그럼 Redux는 안 써도 되나요?

사실 요즘에는 작은 프로젝트에서는 Redux를 굳이 쓸 필요는 없습니다.
다만 대규모 팀, 복잡한 액션 흐름, 미들웨어가 필요한 경우는 여전히 강력한 툴이에요.

• 공통 액션 로깅, 미들웨어 활용
• 타입 안정성, 복잡한 플로우 제어
• 기존 코드가 Redux 기반일 경우

 

5. ✅ 정리하면?

• Tanstack Query → 서버에서 데이터를 가져올 땐 무조건 고려
• Zustand → 빠르고 간단하게 UI 상태 관리
• Redux → 복잡한 구조/팀에선 여전히 쓸모 있음

 

💡 결론

상태 관리는 “하나로 다 처리하는 게 아니라”, 상황에 맞게 나눠 써야한다.
불필요한 중복 상태를 줄이고, 도구에 맞는 역할만 맡기면 유지보수도 훨씬 쉬워질 것.

✔ Tanstack Query → 서버 상태
✔ Zustand/Redux → UI 상태