• 목록
• 게시판 리스트 옵션
  • 검색

✅ Context API를 쓰면 다 해결된다고? 현실은 그렇지 않다

상태 범위, 성능, 구조 고민

전역 상태를 쉽게 만들 수 있는 Context, 처음엔 이렇게 시작한다:

const ThemeContext = createContext("light");

<ThemeContext.Provider value="dark">
  <App />
</ThemeContext.Provider>

간단하고 강력해 보이지만, 문제는 모든 컴포넌트가 리렌더링된다는 점.

✅ 값이 바뀌면 Provider 하위 전체가 리렌더링됨

const ValueContext = createContext(0);

<ValueContext.Provider value={count}>
  <HeavyComponent />
</ValueContext.Provider>

count만 바뀌어도 HeavyComponent는 리렌더링됨.
불필요한 렌더가 발생해서 퍼포먼스 저하 가능성 있음.

✅ 해결 방법

• 상태를 나눠서 Context 분리

• 진짜 빈번한 변경이 필요한 상태는 Zustand, Jotai 등 외부 상태관리 도구 사용 추천

Context는 단순하고 변경이 적은 값에만 쓰는 게 효율적이다.