로그인 상태 및 유저 정보 전역 상태 관리 방식

[eafiseemn]

로그인 상태와 유저 정보에 따라 Header, 작성 글의 Edit / Delete 표시 여부, 마이페이지 등이 달라져야하기 때문에 전역 상태로 관리하려고 하는데, 어떤 방법을 사용할지 논의하고 싶습니다.

---

필요한 전역 상태

1. 로그인 상태 (isLoggedIn, userId, ...) → Header, MyPage, Review/Quotes 쓰기, 콘텐츠 즐겨찾기 등 전역에서 필요
2. 사용자 정보 (nickname, profileUrl, 알림 설정, ...) → MyPage, Notifications, Comments 등에서 필요
3. 알림 상태 (newNotifications) → Header(알림 버튼 빨콩 표시), Notifications, MyPage 알림 목록 등에서 필요

적용해볼 수 있는 방법들

1. React 기본 내장 기능 사용

• Context + useReducer/useState
• 가장 기본적이고, 수업시간에 배워본 방식
• 의 {children} 으로 가 들어가는 형태

2. Zustand

• 가볍고 빠른 상태 관리 라이브러리
• 요즘 많이 사용

3. Recoil

• Facebook에서 만든 전역 상태 관리 라이브러리
• atom 단위의 세밀한 상태 제어, 의존성 기반 파생 상태 관리

4. Redux Toolkit

• 대형 프로젝트에서 자주 사용하는 구조화된 툴킷
• 상태 로직이 매우 복잡하거나 공유 범위가 매우 넓을 때 주로 사용

✅ 각 방식 비교 정리

방식	장점	단점	추천 상황
React Context API(+ useState, useReducer)	- 외부 라이브러리 불필요 - 기본 React 문법에 충실 - 간단한 전역 상태에 적합 - TypeScript와 궁합 좋음	- 많은 컴포넌트가 구독 시 리렌더링 이슈 발생 - 복잡한 상태 분기 처리에 한계 - 비동기 흐름 다루기 불편	- 소규모 앱 - 로그인 상태, 테마, 다크모드 등 단순 전역값
Zustand	- 매우 가볍고 빠름 (peer dep도 없음) - 컴포넌트 리렌더링 최적화 (선택적 구독) - 비동기 로직도 store 안에서 쉽게 처리 가능 - 파일 분리/확장성 뛰어남	- 글로벌 상태 의존이 과도해지면 구조가 무너질 수 있음 - 공식 Devtools 사용 제한적 - 상태 추적/디버깅은 Context/Redux보다 약함	- 중소규모 앱 - 사용자 정보, UI 상태, 폼 캐시 등 유연하게 관리할 때
Recoil	- atom 단위로 상태 쪼개기 가능 - selector로 파생 상태 만들기 편함 - React Suspense와 잘 통합됨 - 리렌더링 최소화	- 러닝 커브 존재 - 커뮤니티/레퍼런스는 Redux보다 적음 - 복잡한 의존성 그래프 관리 어려움	- 구조적 상태 모델링이 필요한 중규모 앱 - 비동기 파생 상태가 많은 경우
Redux Toolkit (RTK)	- 공식적으로 권장되는 구조화된 상태 관리 - DevTools, middleware, async flow 등 강력 - 커뮤니티/레퍼런스 방대 - 상태 추적, 디버깅이 매우 쉬움	- 보일러플레이트 있음 (RTK로 많이 줄긴 했지만) - 작은 앱엔 오버엔지니어링 가능성 - 학습 비용 있음	- 대규모 앱 - 상태 흐름이 복잡하거나 팀 단위 협업 시 필요

💡 추가로 고려해볼 사항

포인트	Context	Zustand	Recoil	Redux Toolkit
🔋 설치 필요	❌	✅	✅	✅
🧠 러닝 커브	낮음	낮음	중	중~높음
⚡ 성능 최적화	낮음 (전부 리렌더링)	높음 (select 구독)	높음 (atom 단위)	중 (구조화에 따라 다름)
⚙️ 비동기 처리	직접 구현	store 내부에서 가능	selector, Suspense 활용	createAsyncThunk 등으로 지원
🔍 Devtools	없음 (custom 필요)	제한적 지원	제한적 지원	강력한 Redux Devtools 지원

고민되는 지점

• 전역으로 관리해야 할 상태 자체는 대부분 유저 로그인/id 정보 + 알림 정도로 간단하지만 (기본 React Context로 충분),
• 리뷰/댓글/영화&드라마 데이터는 모두 API Fetch + Component 지역 상태인데 로그인 정보에 의존해서 UI가 조건부로 변경되어야 함 (리렌더링이 너무 많이 일어나고, 비동기로 처리해야할 영역들이 지나치게 많아지지 않을까요?)

어떤 걸 사용하면 좋을지 의견 부탁드려요!

[eafiseemn]

(범쌤 의견)

• Context API 의 단점은 리렌더링 / API를 사용해도 무방함
• 프로젝트 이후 수업할 내용이 Zustand랑 React Router 인 점 참고
• 현재까지 수업에서 배운 내용을 활용(React 내장)하는 것이 좋다고는 생각하지만 성능 최적화를 위해 API를 사용하는 것이 금지되지는 않음
• 코드량만 따지면 Zustand 가 훨씬 적고 심플하지만 learning curve 가 있음

[eafiseemn]

(진강님) Zustand가 쉬운지 어려운지 모르겠어서 판단을 못하겠음
(유하님) Context API 를 쓰는 방식을 고려하고 있었음

[eafiseemn]

결론 : 우선 context API에 익숙해지는 측면에서 (복습) Context API로 만드는 게 좋겠음!