React Context vs Zustand: 언제 무엇을 사용해야 할까
개발자들은 React 상태 관리에서 종종 한 가지 실수를 범합니다. Context를 잘못 사용하고는 성능 문제의 원인을 Context 탓으로 돌리곤 합니다.
문제는 대개 하나의 거대한 context 객체입니다. 해당 객체의 값이 변경되면, 그 context를 사용하는 모든 컴포넌트가 리렌더링됩니다. 컴포넌트가 아주 작은 데이터 조각 하나만 필요하더라도, 객체의 모든 변화에 반응하게 됩니다.
만약 알림(notifications)이 30초마다 업데이트된다면, Navbar가 사용자 이름 정보만 필요하더라도 Navbar는 리렌더링됩니다. 이는 성능을 저하시키는 주범입니다.
라이브러리 없이도 이 문제를 해결할 수 있습니다. 변경 빈도에 따라 context를 분리하세요.
하나의 큰 context 대신 여러 개를 사용하세요: • 사용자 데이터를 위한 UserContext • 사이드바 상태를 위한 UIContext • 알림을 위한 NotificationContext
이제 Navbar는 사용자 데이터가 변경될 때만 리렌더링됩니다. 이러한 간단한 분리만으로도 대부분의 성능 관련 불만을 해결할 수 있습니다.
다음과 같이 안정적인 값에는 React Context를 사용하세요: • 테마 (Themes) • 인증 상태 (Auth status) • 언어 설정 (Language settings)
Context는 Server Components와도 잘 작동합니다. 반면 Zustand는 클라이언트 측에서만 작동합니다.
선택적 구독(selective subscriptions)이 필요할 때는 Zustand를 사용하세요. Zustand를 사용하면 컴포넌트가 상태의 특정 슬라이스(slice)를 구독할 수 있습니다. 스토어의 한 부분이 변경되면, 해당 부분을 관찰하고 있는 컴포넌트만 리렌더링됩니다.
새로운 상태를 관리할 때는 다음 로직을 따르세요:
다음과 같은 경우 React Context를 사용하세요: • 데이터가 안정적인 경우 (테마, 인증, 로케일). • SSR 또는 Server Components와 함께 작동해야 하는 경우. • context를 분리하여 prop drilling을 방지하고 싶은 경우.
다음과 같은 경우 Zustand를 사용하세요: • 데이터가 빈번하게 변경되는 경우. • 컴포넌트가 상태의 특정 슬라이스를 관찰해야 하는 경우. • 로직이 복잡한 경우.
잠깐만요. API 데이터에는 둘 중 어느 것도 사용하지 마세요. 서버에서 데이터를 가져오는 경우라면 TanStack Query를 사용하세요. Context와 Zustand는 캐싱이나 백그라운드 리페칭(refetching)을 처리하지 않습니다.
요약: • 하나의 거대한 context 객체는 리렌더링을 유발합니다. 분리하세요. • 안정적인 값에 Zustand를 사용하는 것은 과합니다. • 빈번한 변경에 Context를 사용하면 지연이 발생합니다. • 서버 상태 관리에 Zustand를 사용하는 것은 적절한 도구가 아닙니다.