Angular (Service & RxJS) vs NgRx / Redux 차이점

서비스와 NgRx의 비교.

 

개인적으로는 전역 상태관리 라이브러리인 Redux/NgRx가 Angular에서는 필요하지 않다고 생각한다.

 

Angular의 서비스는 싱글톤이고, 컴포넌트간 데이터를 공유할 수 있도록 하기 때문이다.

 

chatgpt에게 "what is the difference between Service from Angular and Redux"라고 질문했을때 4가지 항목으로 분류해 그 차이점을 설명한다.

 

1) 상태 업데이트의 추적성:
Redux에서는 상태 업데이트가 엄격하게 추적되고 기록됩니다. 이는 디버깅을 용이하게 만들어줍니다. 반면에 Angular 서비스에서는 상태 변경이 어떻게 발생했는지 추적하기가 훨씬 어렵습니다. 각 컴포넌트가 서비스의 상태를 직접 변경할 수 있으며, 이는 예상치 못한 부작용을 초래할 수 있습니다.

 

상태 변경이 어떻게 발생했는지 추적하기가 훨씬 어렵습니다.

(반박) → 서비스에서 RxJS의 Observable을 활용하면 변수의 상태변화를 추적할 수 있다.

서비스는 예상치 못한 부작용을 초래할 수 있습니다.

(반박) → 변수/상태를 업데이트하는 것은 반드시 서비스 내에 선언된 함수를 통해서만 이루어져야 한다. 만약 변수/상태가 public 상태라면 단순히 service.변수.next(상태변화 값) 으로도 변수/상태를 업데이트할수있다. 물론 변수/상태에  private 을 설정하거나 getter 함수를 활용해서 이를 막을수도 있다.

디버깅을 용이하게 만들어줍니다.

(인정) →  디버깅이 용이하기는 하다. 그것은 Redux DevTools를 사용했을때 얘기이다. 크롬 개발자도구에 Redux 항목이 생기고 여기에서 변수/상태의 흐름과 과거 이력을 볼 수 있다. 서비스에서 변수/상태 옵저버블에 subscribe을 걸어 콘솔로그를 찍는 것 보다 편리해 보이고 개발스러운 느낌이 난다.

2) 단일 데이터 흐름:
Redux는 단방향 데이터 흐름을 가지고 있습니다. 액션을 통해 상태가 변경되고, 변경된 상태가 전체 애플리케이션에 효과를 미칩니다. 이에 반해 Angular 서비스는 데이터 흐름이 컴포넌트 간에 직접적으로 이루어지므로, 전역 데이터 흐름의 단일 소스를 유지하는 것이 더 어렵습니다.

 

전역 데이터 흐름의 단일 소스를 유지하는 것이 더 어렵습니다.

(반박) → 만약 A 컴포넌트에서 서비스를 통해 상태를 변경하여도 그 상태를 구독하고 있는 B, C 컴포넌트들은 자연스럽게 변경된 상태를 적용받는다. 이것은 데이터가 단방향으로 흐른다는 관점에서 Redux와 같은 기능을 하고 있다고 볼 수 있다.

(반박) → 서비스는 singleton이다. 그렇기 때문에 단일 소스를 유지한다고 볼 수 있다.

chatgpt가 "서비스를 통해 관리되는 데이터는 하나의 소스에서 유지되고, 이로 인해 데이터가 단일 소스로 유지된다고 할 수 있습니다. 그러나 이것은 전통적인 상태 관리 라이브러리(예: Redux 또는 NgRx)에서의 단일 소스와는 조금 다른 개념입니다." 라고 하더라.

3) 불변성과 예측 가능성:
Redux에서 상태는 불변성을 유지하며 업데이트됩니다. 이는 상태의 변화를 추적하고 예측하기 쉽게 만듭니다. Angular 서비스에서는 상태의 불변성을 강제하지 않으므로, 상태의 변화가 예측되지 않을 수 있습니다.

 

Angular 서비스에서는 상태의 불변성을 강제하지 않으므로, 상태의 변화가 예측되지 않을 수 있습니다.

(반박) → 서비스에 선언된 변수/상태는 기본적으로 public 상태로써, 컴포넌트에서 변수에 접근해 값을 변경할 수 있다. 하지만 변수에 private을 설정하고 변수/상태는 함수로만 변경하는 것을 룰로 삼는다면 불변성을 유지한다고 볼 수 있다고 생각한다.

4) 중앙 집중화된 상태 관리:
Redux는 중앙 집중화된 상태 저장소를 통해 전체 애플리케이션의 상태를 관리합니다. 이에 반해 Angular 서비스는 각각의 서비스가 별도의 인스턴스를 가지며, 이는 전체 애플리케이션 상태의 중앙 집중화된 관리를 어렵게 만듭니다.

 

(부분 인정) → 중앙에서 집중적으로 관리하는 구조라면, 프로젝트에 새롭게 참여하는 개발자 입장에서 소스코드를 분석하는데 쉬울 것 같다. 프로젝트의 규모가 커지면서 관리해야할 상태도 많아질테고, 그 성격에 따라 서비스도 세분화될 것이다. 그에 따라 구조에 대해 신경써야할 경우도 생길 것이다.

 

결론:

NgRx를 사용해보지 않았지만, 우선 한번 사용해보고 피드백을 남겨야될거같다.