local state와 global state의 차이는 무엇인가요?

Question

Accepted Answer

**Local state**는 단일 컴포넌트(또는 작은 하위 트리)에 속하며 다른 곳에서는 필요하지 않은 state입니다. **Global state**는 앱 전반에 걸쳐 여러, 종종 멀리 떨어진 컴포넌트들이 공유하는 state입니다.

## Local state — 하나의 컴포넌트에 한정됨

```jsx
function SearchBox() {
  const [query, setQuery] = useState(""); // 오직 이 컴포넌트만 `query`가 필요합니다
  return <input value={query} onChange={e => setQuery(e.target.value)} />;
}
```

Local state는 컴포넌트 내부에 존재합니다(`useState`, `ref`, `data()`). 예: 입력값, 드롭다운이 열렸는지 여부, 호버 상태, 폼의 임시 입력값. 다른 어떤 컴포넌트도 이를 신경 쓰지 않습니다.

## Global state — 앱 전역에서 공유됨

```jsx
// 로그인한 사용자는 navbar, 프로필 페이지, 설정, 결제 등에서 필요합니다...
const user = useUserStore(s => s.user); // 글로벌 store/context에서 가져옴
```

Global state는 서로 관련 없는 여러 컴포넌트가 일관되게 읽거나 갱신해야 하는 데이터입니다. 인증된 사용자, 테마, 장바구니, 앱 전역 알림 등이 해당합니다. Context, store(Redux/Zustand/Pinia) 또는 유사한 곳에 존재합니다.

## 어떻게 결정할까

```text
질문: "이 데이터가 몇 개의 컴포넌트에 필요하고, 그들이 얼마나 멀리 떨어져 있는가?"

하나의 컴포넌트(또는 부모+자식)         → LOCAL state
관련 없는 여러 컴포넌트 / 앱 전체        → GLOBAL state
```

## 흔한 실수: 과도한 글로벌화

```jsx
// ❌ 단일 폼의 입력을 global state에 두기 — 불필요한 복잡성
globalStore.setFormInput(value);

// ✅ local로 유지 — 오직 이 폼만 사용함
const [value, setValue] = useState("");
```

모든 것을 글로벌로 만들면 보일러플레이트가 늘고, 컴포넌트가 결합되며, 성능을 해칠 수 있습니다(리렌더링 증가). 가장 좋은 방법은 **state를 가능한 한 local로 유지**하고, 공유가 정말로 필요할 때만 글로벌로 끌어올리는 것입니다.

## 왜 중요한가

local과 global 중 무엇을 선택할지는 가장 영향력 있는 state 결정 중 하나입니다.

state를 local로 유지하면 컴포넌트가 단순하고 자기완결적이며 성능이 좋아집니다. 데이터가 정말로 공유될 때만 global state에 손을 뻗으면 불필요한 복잡성을 피할 수 있습니다.

자주 보이는 안티패턴 — "혹시 몰라서" 모든 것을 글로벌 store에 넣는 것 — 은 비대하고 강하게 결합된 앱을 만듭니다.

지침은 이렇습니다: **기본은 local로, 공유가 요구할 때만 global로.**