[TIL] 상태 관리 / Redux

최근에 상태 관리 라이브러리로 Zustand가 많이 쓰이고 있지만 아직까지는 Redux가 압도적으로 많이 쓰인다.

 

 

많이 쓰기도 하고 Redux와 Zustand의 사용 방법이 유사해서 Zustand를 배우기 전 Redux를 배우는 것이 좋다고 생각했다.

현재는 왜 Redux에서 다른 라이브러리로 옮겨가고 있는 건지도 찾아보고자 한다.

 

상태 관리

상태 관리란?

상대 관리란 애플리케이션의 다양한 상태를 효과적으로 추적하고 조작하는 과정을 말한다. 여기서 상태는 애플리케이션에서 특정 시점에 저장된 데이터를 의미하며 UI, 서버와의 상호작용 등에서 중요한 역할을 한다.

상태 관리의 필요성

쉬운 데이터 공유

부모 컴포넌트에서 자식 컴포넌트로의 전달이 아니더라도 여러 컴포넌트 간에 데이터 전달을 쉽게 할 수 있다.

 

효율적인 디버깅과 유지보수성 향상

애플리케이션 전반에 걸쳐 명확하고 예측 가능한 데이터 흐름과 관리를 제공하여 애플리케이션 문제 해결과 디버깅을 쉽게 할 수 있다. 그렇기 때문에 유지보수에도 용이하다.

 

일관성 유지

중앙에서 상태를 관리하면 애플리케이션의 모든 부분이 같은 데이터를 사용하게 되어 일관성을 유지할 수 있다. 이를 통해 예측 가능한 동작을 보장하고 버그를 줄일 수 있다.

 

Redux

Redux는?

리액트 제작사인 메타는 리액트를 처음 발표할 때 Flux 아키텍쳐를 함께 발표했다.

 

Flux는 앱 수준 상태, 즉 여러 컴포넌트가 공유하는 상태를 리액트 방식으로 구현하는 방법이다.

 

이후로 Flux 설계 규격을 준수하는 오픈소스 라이브러리가 등장했는데 리덕스는 그중에서 가장 많이 사용되는 패키지다.

 

리덕스는 상태 관리를 위해 사용하는 JS 라이브러리이다.

 

Flux 아키텍쳐를 따르며 단방향 데이터 흐름 모델을 통해 상태를 관리를하여 확장성을 늘려준다.

Redux의 구성요소

Store

애플리케이션의 상태를 저장하는 객체다.

 

하나의 프로젝트는 하나의 스토어만 가질 수 있다.

 

Action

상태를 변경하기 위해 스토어에 보내는 객체다.

 

반드시 type을 가져야 한다. 액션 객체는 액션생성함수에 의해서 만들어진다.

 

Reducer

현재 상태와 액션 객체를 받아 새로운 상태를 반환하는 함수다.

 

상태 업데이트의 로직을 정의하며 상태를 직접 수정하지 않고 새 객체를 반환해야 한다.

 

Dispatch

액션 객체를 스토어에 전달하여 리듀서를 호출하고 상태를 업데이트하도록 요청하는 메서드다.

 

Subscribe

상태 변화에 반응하기 위해 콜백 함수를 등록하는 메서드다.

 

스토어의 상태가 변경되면 Subscribe로 등록한 함수가 호출된다.