[React] React에서 상태관리가 필요한 이유

 

 

React로 개발할 때 Redux, Recoil, Zustand, jotai 등 여러가지 상태관리 라이브러리에 대해 들어봤을 것이다. 이런 라이브러리들이 처리해주는 것은 무엇이고 왜 사용하는 것일까? 상태관리를 하는 이유는 뭐고 왜 중요한 것일까?

 

1. 상태란 무엇일까?

React에서 상태란 컴포넌트의 데이터를 나타낸다. 어떤 의미를 갖고 있는 값이고 애플리케이션의 동작에 따라 지속적으로 변경할 수도 있는 값이다. 이런 상태가 변경될 때마다 UI가 업데이트 되거나 컴포넌트가 리렌더링된다. 이렇게 변경이 가능하기 때문에 변경된 상태를 감지하고 React에서는 필요한 UI 업데이트를 수행한다.

 

2. 상태관리가 필요한 이유

기술의 발전에 따라 웹은 단순 지식과 정보를 보여주던 Document에서 점점 그 기능이 다양해지고 복잡도가 커져왔다. 이렇게 복잡해진 웹애플리케이션의 상태를 관리하기 위해 상태관리를 할 필요성이 생겨났다. 

• 복잡한 애플리케이션 상태 관리
• 데이터 공유
• 컴포넌트 간 통신
• 성능 최적화
• 애플리케이션 상태의 변화 관리

상태 관리는 복잡한 애플리케이션에서 여러 컴포넌트 간에 공유되는 상태를 효율적으로 관리하고, 데이터를 중앙 집중화하여 일관성을 유지하며, 컴포넌트 간의 통신을 관리하고 데이터를 전달하며, 성능을 최적화하고 애플리케이션의 상태 변화를 추적하여 예측 가능한 흐름을 유지하는 데 사용된다.

 

3. 상태관리가 어려운 이유

규모가 작은 애플리케이션이라면 상관없지만 서비스의 규모와 복잡성이 커진다면, 애플리케이션 내에 여러 개의 중첩된 컴포넌트가 존재하게 되고 이러한 컴포넌트 계층 구조의 복잡성은 상태 관리를 어렵게 만들 수가 있다. 또한, 애플리케이션의 상태는 중요도나 역할에 따라 전역적으로 관리되어야 할 수도 있고, 특정 컴포넌트 내에서만 관리되어야 할 수도 있다.

또한, React에서 상태는 불변성을 유지해야 하므로 상태 업데이트 시 새로운 상태 객체를 생성해야 한다. 이러한 상태 업데이트의 복잡성과 함께 데이터 Fetch와 같은 비동기 작업을 처리해야할 때 추가적으로 신경써야할 요소가 있을 수 있어 그런 것 또한 상태관리를 복잡하게 만든다.

 

4. 상태관리할 때 자주 나오는 개념 Action, Dispatch, Store란?

Action, Dispatch, Store는 주로 Redux와 관련된 용어로 Redux는 가장 유명한 React 상태관리 라이브러리이다. 

Action 

Action은 상태 변화를 나타내는 객체로 type 필드를 가지며 이것을 통해 Action의 종류를 식별한다. payload 필드는 액션에 필요한 추가적인 데이터를 담는다. 

Dispatch

Dispatch는 Action을 store에 전달하는 역할을 한다.

Store

store는 애플리케이션의 상태를 담고 있는 객체이다. Redux에서는 단일 store를 사용하여 전역으로 상태관리를 하는데 이 단일 store로 상태를 중앙 집중화하여 관리한다. store는 action을 받아 상태를 변경하고 변경된 상태를 관리한다.