Context API 활용 전략

TUTORIAL

Context API 활용 전략

React Context API를 효과적으로 활용하는 방법. 상태 관리 패턴과 성능 최적화 전략을 배웁니다.

럿지 AI 팀

2025-01-10

15분

Context API란?

컴포넌트 트리 전체에 데이터를 전달하는
React의 내장 상태 관리 솔루션입니다.

// Context 생성
const ThemeContext = createContext('light');

// Provider로 값 제공
<ThemeContext.Provider value="dark">
  <App />
</ThemeContext.Provider>

// Consumer에서 값 사용
const theme = useContext(ThemeContext);

언제 사용할까?

적합한 경우

- 테마 (다크/라이트 모드)
- 로그인 사용자 정보
- 언어/로케일 설정
- 전역 설정 값

부적합한 경우

- 자주 변경되는 상태
- 복잡한 상태 로직
- 성능이 중요한 경우
- 대규모 앱 상태 관리

성능 최적화 전략

Context 분리

ThemeContext + AuthContext

관련 상태끼리 별도 Context로 분리

useMemo 활용

useMemo(() => ({ theme }), [theme])

Provider value 객체 메모이제이션

State/Dispatch 분리

StateContext + DispatchContext

읽기와 쓰기 Context 분리

Selector 패턴

use-context-selector 라이브러리

필요한 값만 선택적으로 구독

커스텀 훅 패턴

// contexts/auth.tsx
const AuthContext = createContext(undefined);

export function AuthProvider({ children }) {
  const [user, setUser] = useState(null);

  const login = async (credentials) => {
    const user = await api.login(credentials);
    setUser(user);
  };

  const logout = () => setUser(null);

  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

// 커스텀 훅으로 감싸기 (에러 핸들링 포함)
export function useAuth() {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error('useAuth must be within AuthProvider');
  }
  return context;
}

Context vs 상태 라이브러리

기준	Context	Zustand/Jotai
번들 크기	0kb (내장)	1-3kb
리렌더링	전체	선택적
DevTools	기본	풍부
적합 규모	소-중	중-대