🧩 24. 전역 상태 vs 지역 상태 — React 상태 관리, 이 기준부터 명확히 하자

---

React에서 상태(state)를 관리하는 방법은 많다.
useState, useReducer, Context, Zustand, Redux, Recoil 등등…
하지만 이 중 어떤 걸 언제 써야 할까?

사실 그보다 먼저 정리해야 할 건
"이 상태는 전역이어야 하는가, 지역이어야 하는가?" 라는 기준이다.

---

✅ 지역 상태(Local State)란?

컴포넌트 내부에서만 사용되는 상태
→ useState, useReducer로 관리

✅ 사용 예시

• input 필드 값
• 모달 열림/닫힘 여부
• 버튼 클릭 여부
• 필터 조건, 토글 UI

const [isOpen, setIsOpen] = useState(false);

📌 해당 상태는 컴포넌트를 벗어나면 의미가 없고,
props로 넘겨주지 않는 한 다른 컴포넌트에서는 접근할 수 없다.

---

✅ 전역 상태(Global State)란?

여러 컴포넌트에서 동시에 접근하고 공유해야 하는 상태
→ Redux, Zustand, Recoil, Context API 등 사용

✅ 사용 예시

• 로그인한 사용자 정보
• 장바구니 리스트
• 테마 모드 (라이트/다크)
• 게임 상태, 웹소켓 연결 정보

// 예: Zustand 전역 상태
const useUserStore = create((set) => ({
  user: null,
  setUser: (user) => set({ user }),
}));

📌 프로젝트 규모가 커질수록 전역 상태는 점점 많아지는데,
불필요한 전역화는 오히려 성능 저하와 복잡성만 만든다.

---

⚖️ 어떤 기준으로 구분해야 할까?

질문	전역 상태일 가능성
이 상태를 여러 컴포넌트에서 참조하나?	✅ 예
페이지 전환 후에도 상태가 유지되어야 하나?	✅ 예
외부 API, 소켓 등 외부와 연관되었나?	✅ 예
이 상태가 특정 UI에만 영향을 주는가?	❌ 아니오 → 지역 상태로 가능
부모-자식 간에만 공유되나?	❌ props로 전달하면 충분

---

🔍 실전에서 겪은 사례

❌ 상태를 너무 전역화한 경우

• 모든 필터 값을 Zustand로 관리했더니,
• 필터 조건이 바뀔 때마다 전체 컴포넌트가 리렌더링
  → 실제로는 input 하나만 다시 그리면 됐는데…

✅ 지역 상태로 바꾼 후

• 각 필터 컴포넌트 내부에서 useState로 분리
  → 성능 개선 + 상태 추적도 쉬워짐

---

✅ 상태 설계할 때의 순서 팁

1. 먼저 "이 상태가 어디서 쓰이는가?"를 파악
2. 한 곳에서만 쓰이면 useState
3. 여러 컴포넌트가 공유하면 Context, Zustand 등 고려
4. 페이지 간 유지 필요 시 전역 상태로 이동

---

📝 내가 느낀 점

예전엔 상태가 생기면 무조건 Zustand로 다 넣었다.
그런데 프로젝트가 커지니까 전역 상태를 추적하는 게 더 힘들어졌다.
지금은 무조건 "이건 진짜 전역이어야 해?"를 먼저 자문한다.

그 기준만 세우면 상태 관리는 훨씬 쉬워지고,
버그도 줄고, 리렌더링도 줄어들었다.

---

🧠 "상태 관리란, 먼저 '범위'를 정한 다음에 '도구'를 고르는 일이다."