상태 관리

안녕하세요 웹 YB 권새봄입니다!

요즘 정말 많은 상태 관리가 있는데, 어떤 상태 관리 방식이 적절한지, 제가 상태 관리 방식에 대해 잘 알고 있는지에 대해 정리를 해보고자 이 글을 작성하게 됐습니다 !!

📌 상태 관리란?

React에서 상태(State)란 UI의 데이터나 특정 값들을 저장하고 관리하는 개념입니다. 하지만, 애플리케이션이 커질수록 컴포넌트 간 상태 공유가 필요해지고, 이를 체계적으로 관리해야 하는 상황이 옵니다.

그렇다면, React에서 상태 관리 방법은 어떤 것들이 있을까요? 그리고 어떤 상황에서 어떤 상태 관리 라이브러리를 선택해야 할까요?

🎯 상태의 종류

먼저, 상태를 크게 두 가지로 나눌 수 있습니다.

1. 로컬 상태 (Local State)

특정 컴포넌트 내부에서만 사용하는 상태
useState, useReducer를 사용하여 관리

👀 언제 사용할까요?

• 하나의 컴포넌트에서만 필요한 상태일 때
• 부모-자식 관계에서만 간단한 상태 공유가 필요할 때

2. 전역 상태 (Global State)

여러 컴포넌트에서 공유해야 하는 상태
Context API, Redux, Recoil, Zustand 등의 라이브러리를 사용하여 관리

👀 언제 사용할까요?

• 여러 컴포넌트에서 공통적으로 사용하는 데이터 (ex. 로그인 정보, 테마 설정 등)
• 부모-자식 관계를 넘어서 여러 곳에서 상태를 공유해야 할 때

🎯 상태 관리 라이브러리 비교

React에서 사용되는 대표적인 상태 관리 방법들을 비교해보겠습니다 !

라이브러리	특징	장점	단점
useState / useReducer	기본적인 상태 관리	간단한 상태 관리 가능	전역 상태 관리 어려움
Context API	기본적인 전역 상태 관리	Redux 없이 글로벌 상태 가능	성능 최적화 필요
Redux	전역 상태 관리 표준	예측 가능한 상태 관리, 디버깅 용이	설정이 복잡하고 코드가 많아짐
Recoil	React 전용 상태 관리	간단한 문법, 비동기 상태 관리 가능	생태계가 Redux보다 작음
Zustand	가벼운 전역 상태 관리	Redux보다 간단하고 직관적	대규모 프로젝트에서는 부족할 수 있음

🎯 상황별 맞는 상태관리

1. 간단한 상태 → useState, useReducer
2. 작은 규모의 전역 상태 → Context API
3. 대규모 프로젝트, 복잡한 상태 → Redux
4. React 전용 상태 관리, 직관적인 API → Recoil
5. Redux보다 가벼운 상태 관리 → Zustand

💡 결론

상태 관리는 React 애플리케이션을 설계할 때 반드시 고민해야 하는 중요한 주제입니다.
컴포넌트가 적을 때는 useState, useReducer 같은 기본 훅만으로도 충분히 상태를 관리할 수 있지만, 애플리케이션이 커지고 컴포넌트 간에 데이터 공유가 많아질수록 전역 상태 관리가 필요해집니다.

📌 결국 중요한 건 상태 관리 라이브러리 자체가 아니라, 애플리케이션의 규모와 특성, 개발 팀의 협업 방식에 맞는 도구를 선택하는 것이므로 여러가지 상태 관리 라이브러리를 익혀두고 필요한 곳에 적절하게 사용하는 것이 좋을 것 같습니다!