리액트에서 상태관리를 하는 이유

최종 수정: 2025.06.04

리액트에서 상태관리를 하는 이유

 

React는 기본적으로 컴포넌트 기반 아키텍처를 따르며, 각 컴포넌트는 자체적인 상태를 가질 수 있다. 그러나 애플리케이션이 커지고 복잡해질수록 여러 컴포넌트 간에 데이터를 공유하고 동기화해야 하는 필요성이 증가한다. 단순한 부모-자식 관계에서는 props를 통해 데이터를 전달할 수 있지만, 깊게 중첩된 컴포넌트 구조에서는 prop drilling이 발생하여 중간 컴포넌트에서는 실제로 사용하지 않는 데이터를 단순히 전달하기 위해 받아야 하는 상황이 발생한다.

 

이러한 문제를 해결하기 위해 상태관리 라이브러리나 패턴을 사용한다. 이는 애플리케이션의 상태를 중앙 집중적으로 관리해 어떤 컴포넌트든지 필요한 데이터에 직접 접근할 수 있게 해준다. 상태관리는 단순히 데이터 전달의 편의성만을 위한 게 아니라 애플리케이션의 상태 변화를 예측 가능하고 일관성 있게 만드는 역할도 한다. 중앙에서 상태관리를 통해 한 번의 상태 업데이트로 관련된 모든 컴포넌트가 자동으로 최신 정보를 반영할 수 있어 편리해진다.

 

또한, 서버와의 데이터 통신이 빈번하게 일어나기에, API 호출의 로딩 상태, 에러 처리, 캐싱 등을 관리해야 한다. 이러한 비동기 데이터 처리를 각 컴포넌트에서 개별적으로 관리하면 코드의 중복이 발생하고 일관성 없는 사용자 경험을 제공할 수 있다. 상태관리를 통해 서버 상태와 클라이언트 상태를 체계적으로 분리하고 관리하면, 데이터의 신뢰성을 보장하고 사용자에게 일관된 경험을 제공할 수 있다.

 

최적화 관점에서도 필요하다. React는 상태가 변경될 때마다 해당 컴포넌트와 그 하위 컴포넌트들을 리렌더링하는데, 적절한 상태관리를 통해 필요한 컴포넌트만 선택적으로 리렌더링되도록 제어할 수 있다. 전역 상태의 특정 부분만 구독하는 컴포넌트는 해당 부분이 변경될 때만 리렌더링되므로, 불필요한 연산을 줄이고 애플리케이션의 성능을 향상시킬 수 있다.

---

■ 상태 관리 방법

1. Context API

의존성 주입(Dependency Injection)을 통해 이미 존재하는 값(상태)를 컴포넌트 트리에 주입해주는 역할을 한다. Context는 상태를 생성하거나 관리하지 않는다.

 

2. Flux 패턴의 Redux, Zustand

중앙 집중화

Flux 패턴
Action → Dispatcher → Store → View → Action

참고: Flux 패턴 https://young-taek.tistory.com/362

 

3. Atomic 방식의 Jotai, Recoil