상태관리

1.개념
2.종류
3.결론

개념

• React 애플리케이션에서는 상태를 관리하는 것이 매우 중요함
• 상태는 사용자의 인터랙션, 서버와의 통신 등에 따라 변경되는 데이터로, 크게 지역 상태, 전역 상태, 서버 상태, URL 상태로 나뉠 수 있음.

종류

지역 상태 (Local State)

• 개념: 특정 컴포넌트 내부에서만 관리되고 사용하는 상태.
• 특징: 일반적으로 UI의 동작과 관련된 데이터(예: 입력 필드, 토글 상태)를 관리함.
• 예시: useState, useReducer 등을 사용해 컴포넌트 내부에서 선언된 상태.
• 사용 목적: 컴포넌트 간에 공유할 필요가 없는, 한 컴포넌트에서만 필요한 데이터 처리

전역 상태 (Global State)

• 개념: 여러 컴포넌트에서 공유되는 상태로, 애플리케이션 전반에 걸쳐 참조될 수 있는 데이터.
• 특징: 로그인 상태, 사용자 정보, 테마 설정 등과 같이 여러 컴포넌트에서 동시에 필요로 하는 데이터.
• 예시: Context API, Redux, Recoil 등의 전역 상태 관리 라이브러리를 사용해 구현.
• 사용 목적: 앱 전체 또는 특정 컴포넌트 트리에서 공통적으로 접근해야 하는 데이터 관리.

서버 상태 (Server State)

• 개념: 서버에서 가져오는 상태로, 애플리케이션 외부 소스(API)에서 가져오는 데이터.
• 특징: 서버의 상태는 자주 변경될 수 있고, 로딩, 에러, 데이터의 신선도 관리가 중요합니다. 따라서 서버 상태는 캐싱 및 리패칭이 필요할 수 있습니다.
• 예시: React Query, SWR 등의 라이브러리를 사용하여 서버와의 데이터 통신과 캐싱을 간편하게 관리.
• 사용 목적: API 호출로 가져온 데이터를 캐싱하고, 상태를 신속하게 업데이트 및 동기화하기 위함.

URL 상태 (URL State)

• 개념: URL을 통해 관리되는 상태로, 쿼리 파라미터, 경로, 해시 등이 포 함됩니다.
• 특징: 페이지의 라우팅이나 검색 필터, 페이지네이션 등에 자주 사용되며, 브라우저의 뒤로 가기/앞으로 가기 기능과도 연동됩니다.
• 예시: React Router의 useLocation, useParams 훅 등을 통해 URL 상태를 관리.
• 사용 목적: URL을 통해 현재 페이지의 상태나 위치를 반영하고 공유할 수 있도록 하기 위함.

Derived State (파생 상태)

• 개념: 다른 상태를 기반으로 계산된 상태
• 특징: 다른 상태에 의해 자동으로 계산되므로 직접적으로 업데이트할 필요는 없음.
• 예시: 필터링된 목록, 합산된 값, 특정 조건에 따른 UI 상태 등.
• 사용 목적: 컴포넌트 내부에서 다른 상태를 기반으로 직접 계산하거나, useMemo를 사용하여 최적화할 수 있음

요약

결론

• 각 상태는 용도와 특성이 다르기 때문에, 애플리케이션의 요구 사항에 맞게 적절한 상태 관리 방식을 선택하는 것이 중요!