Files

T

Antigravity Agent 93ec7e9056 [G1-Sync] Manual knowledge update

2026-05-09 21:08:02 +09:00

3.1 KiB

Raw Blame History

id, title, category, status, source_trust_level, verification_status, created_at, updated_at, tags, tech_stack, applied_in, aliases

title

Context API 잘못 쓰기

Context 는 자주 안 바뀌는 의존성 주입 도구지 글로벌 상태 매니저가 아니다. 자주 바뀌는 값을 한 Context 에 넣으면 모든 소비자가 매번 재렌더.

📖 핵심 개념

적합: theme, locale, auth user, feature flags, DI(API client).
부적합: 자주 변하는 list, 입력 값, 폼 state. → Zustand / Redux / Jotai.
변화 빈도와 소비자 수가 동시에 크면 split.

💻 코드 패턴

Split by frequency

const StaticContext = createContext({ apiClient, theme }); // 거의 안 바뀜
const PresenceContext = createContext({ onlineUsers });    // 자주 바뀜

<StaticContext.Provider value={static}>
  <PresenceContext.Provider value={presence}>
    {children}
  </PresenceContext.Provider>
</StaticContext.Provider>

Selector hook

function useUserName() {
  const { user } = useContext(AuthContext);
  return user.name; // 그래도 user 객체가 바뀌면 모든 소비자 재렌더
}
// 진짜 selector 가 필요하면 zustand 또는 use-context-selector 라이브러리.

Provider value 안정화

function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  const value = useMemo(() => ({ user, setUser }), [user]); // 매 렌더 새 객체 방지
  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
}

🤔 의사결정 기준

데이터 성격	Context	외부 store
정적 설정 (theme, locale)	✅	❌
인증 user	✅	OK either
실시간 presence / cursor	❌	✅
Form state	❌	react-hook-form
캐시된 서버 데이터	❌	React Query / SWR
UI 상태 (modal open, selection)	✅ (좁은 영역)	✅

❌ 안티패턴

value 가 매 렌더 새 객체: 모든 소비자 재렌더. useMemo / useState 결과 그대로.
한 Context 에 모든 글로벌 상태: GodContext. split 또는 store.
deeply nested Provider hell (10단계+): 드릴링이 더 나을 수도. 또는 store 통합.
Context 안의 Date/Map/Set 직접 mutate: 소비자에게 변경 안 알림. 새 인스턴스 반환.

default value 에 throw 안 던지기: Provider 잊으면 silent default. 안전하게:

const ctx = useContext(MyContext);
if (!ctx) throw new Error('useMyContext must be used within MyProvider');

🤖 LLM 활용 힌트

상태 라이브러리 선택지 명시: "이 데이터는 Context vs Zustand vs React Query 중 어디?"
LLM이 큰 글로벌 state 에 Context 만 쓰려고 하면 store 권유.

3.1 KiB Raw Blame History