Hook vs Store

기본적으로 리액트 훅과 Store(전역 상태 관리) 는 상태관리를 위한 도구이지만, 용도가 다르다.

 

✅ React Hook

• 정의: React 함수형 컴포넌트에서 상태나 라이프사이클 기능을 사용할 수 있게 하는 함수.
• 대표 Hook: useState, useEffect, useReducer, useContext, useMemo 등.
• 역할: 개별 컴포넌트 안에서의 로컬 상태를 관리.
• 범위: 해당 컴포넌트 내에서만 유효. 다른 컴포넌트에서 직접 접근 불가.
• 용도: 버튼, 로컬에서만 사용하는 입력 등

✅ Store (전역 상태 관리)

• 정의: 여러 컴포넌트가 공유하는 전역 상태를 저장하고 관리하는 공간.
• 사용 예: Zustand, Redux, Recoil 등.
• 역할: 앱 전체에서 사용할 수 있는 상태를 보관하고, 구독자를 업데이트.
• 범위: 앱 전체 — 여러 컴포넌트에서 동일한 상태를 구독하거나 업데이트할 수 있음.
• 용도: 사용자 정보, 전체 페이지에서 공유해야하는 설정 값, 공용 캐시 등

zustand

const useStore = create((set) => ({
  count: 0,
  increase: () => set((state) => ({ count: state.count + 1 }))
}));

// 컴포넌트에서 사용
const count = useStore((state) => state.count);