(React) 상태관리 설명

상태(state)란?

상태는 컴포넌트의 동작에 영향을 주는 데이터!

사용자의 입력이나 외부 데이터에 따라 변할 수 있는 값

React 안에서 예를 들어,

• 버튼이 눌렸는가?
• 입력창에 적힌 값은 무엇인가?
• 현재 로그인한 사용자는 누구인가?

이런 것들이 모두 상태라고 볼 수 있음

상태 관리란?

상태를 저장하고, 변경하며, 그에 따라 UI를 업데이트하는 과정

React는 이런 상태 관리를 아주 잘 도와주는 라이브러리

 

상태 관리를 왜 해야 할까?

상태가 변할 때 화면이 자동으로 다시 렌더링되도록 만들기 위해서!

예를 들어, 버튼을 클릭해서 숫자가 올라가야 하는데 이 숫자 상태를 관리하지 않으면 화면은 그대로인 경우가 있죠

또한, 규모가 커질수록 상태가 여러 컴포넌트에서 동시에 쓰이거나, 상태 변화에 따라 여러 컴포넌트가 영향을 받을 수 있기 때문에 어떤 방식으로 상태를 관리할지 설계가 중요함!

 

SPA에서 상태 관리가 중요한 이유

SPA(Single Page Application)는 하나의 HTML에서 여러 화면을 JavaScript로 바꾸는 구조

이 구조에서는 페이지 간 이동도, 버튼 클릭도, 입력도 모두 JS가 상태를 바꿔서 처리함

즉, SPA에서 화면은 상태에 따라 결정된답니당

이 때문에 SPA에서는 상태 관리 = 앱의 핵심 동작 제어인 셈!

 

상태 관리 방식의 분류

1. 로컬 상태 관리

• 상태를 해당 컴포넌트 내부에서만 관리
• 가장 단순한 방식
• useState, useReducer 사용 → 주로 useState를 사용해서 데이터 받아온 것에 대해서 상태관리를 많이 사용 해봤음
  - 예: 버튼 클릭 여부, 모달 열림 상태 등

2. 전역 상태 관리

• 여러 컴포넌트에서 공유해야 하는 상태를 하나의 저장소에서 관리
• 규모가 커지면 필수
  → 복잡한 구조들을 피해서 편하게 꺼내 사용하기 위함이 제일 큰거 같음 
• Context API, Redux, Recoil, Zustand 등 사용
  - 예: 로그인 정보, 장바구니 목록, 테마 설정 등

3. 서버 상태 관리

• 외부 서버(API)에서 가져온 데이터 상태를 관리
• React Query, SWR 등 사용
  - 예: 사용자 정보, 게시글 목록 등

 

각 방식의 특징 요약

• 다들 각자의 특징이 있기 때문에 잘 골라서 사용하는 것이 좋음!

방식	대표 도구	특징
로컬 상태	useState, useReducer	컴포넌트 단위, 간단한 UI 처리에 적합
전역 상태	Context, Redux, Recoil, Zustand	앱 전체에서 상태 공유 필요할 때
서버 상태	React Query, SWR	비동기 데이터 관리, 캐싱, 리페치 최적화