zustand

1. 전역 상태 관리(Global State Management)

● 개념

전역 상태 관리란, 앱 전체에서 여러 컴포넌트가 공유하는 데이터 상태를 한 곳에서 통합적으로 관리하는 것을 의미한다. 이를 통해 **props drilling(컴포넌트 간 속성 전달)**을 피하고, 더 효율적이고 유지보수하기 쉬운 구조를 만들 수 있다.

독일어로 ’상태(state)’를 의미하는 Zustand라는 라이브러리도 이런 목적에서 이름이 유래했다.

⸻

● 전역 상태 관리의 장점
• 상태 공유 용이: 여러 컴포넌트가 동일한 상태를 필요로 할 때 중복 없이 사용 가능
• 리렌더링 최적화: 필요한 컴포넌트만 상태를 구독하여 불필요한 렌더링 방지
• 중앙 집중형 관리: 상태의 흐름을 예측 가능하고 일관되게 유지
• 간편한 디버깅: Redux DevTools 같은 도구로 상태 변경 추적 가능

⸻

● 주요 라이브러리
• Redux
• 오래된 역사와 큰 생태계를 가진 라이브러리
• 상태, 액션, 리듀서로 구성되어 구조가 명확함
• 훅(hook)을 사용해 간단히 연결 가능 (useSelector, useDispatch 등)
• Zustand
• 매우 가볍고 직관적인 API
• 필요할 때만 사용하는 구조로 최소한의 리렌더링 보장
• Recoil, Jotai, MobX, Context API 등도 사용 목적에 따라 선택 가능




2. 반응형 웹(Responsive Web) vs 적응형 웹(Adaptive Web)

● 반응형 웹 (Responsive Web Design)
• 화면의 가로 크기(뷰포트)에 따라 CSS 스타일이 자동 조정되는 방식
• 다양한 디바이스에서도 일관된 사용자 경험 제공
• 대표적으로 미디어 쿼리(Media Query)를 사용하여 구현

@media (max-width: 768px) {
  body {
    background-color: lightgray;
  }
}


● 장점
• 하나의 코드베이스로 모든 디바이스 대응
• 유지보수 용이
• 사용자 친화적인 인터페이스 제공

⸻

● 적응형 웹 (Adaptive Web Design)
• 여러 개의 고정된 화면 레이아웃을 미리 만들어두고, 클라이언트의 디바이스 종류나 해상도에 따라 해당 레이아웃을 선택 적용하는 방식
• 반응형 웹보다 더 정교한 디자인이 가능하지만, 유지보수가 어려울 수 있음