React.js 의 상태관리 라이브러리 Redux 장점

React

MVC (model - view - controller) 패턴

프로젝트가 단순할 때 간단하게 쓸 수 있음

데이터 자료의 양과 화면이 많아질수록 model 과 view 의 수 증가 함 → 데이터 흐름을 읽기 어려움

Redux

flux 패턴

데이터 수정이 dispatcher 한 곳에서만 가능

action이 발생→ dispatcher에 의해 store에 변경된 사항이 저장→ view가 변경되는 단방향 패턴

dispatcher : 어플리케이션에서 발생한 action들을 정리해주는 역할

Store : 어플리케이션의 데이터들이 저장되는 장소

 

Redux의 장점

1. 사용자가 어떤 액션을 했고, 어떤 데이터가 어떻게 변경 되었는지 쉽게 관찰할 수 있다. 이 모든 내용은 기록되고, 개발자는 이전의 특정 상태로 돌아가 볼 수 있다. 버그가 나기 이전 상태로 돌아가서 테스트 해볼 수 있다.
2. 많은 사용자들이 동시에 다양한 작업을 하는 페이스북 같은 서비스에서 힘을 발휘한다. 다른 기기에서 다른 사용자들이 실행하는 액션을 받아 로컬의 작업과 병합해 보여준다.
3. 모든 데이터는 스토리지에 저장할 수 있다. 사용자는 브라우저를 종료하고 다시 들어와도 완전 동일한 시점부터 다시 진행할 수 있다.
4. 기존에는 부모에서 자식의 자식의 자식까지 상태를 전달했지만 리덕스를 사용하면 스토어를 사용하여 상태를 컴포넌트 구조의 바깥에 두고, 스토어를 중간자로 두고 상태를 업데이트 하거나, 새로운 상태를 전달받는다. 따라서, 여러 컴포넌트를 거쳐서 받아올 필요 없이 어떤 컴포넌트라도 직속 부모에게서 받아오는 것 처럼 원하는 상태값을 골라서 props 를 편리하게 받아올 수 있음.

Redux를 사용하면 유용한 경우

1. 컴포넌트 간의 교류가 많을 때
2. 기존 react는 하위 자식 컴포넌트에만 props 로 전달이 가능했다. 하지만 하위의 하위 컴포넌트나 그 이하 , sibling 컴포넌트의 경우 공통 부모 컴포넌트를 찾아 전달하거나 전달의 전달을 해야했음. 이를 해결하기에 store가 유용하게 작용함
3. 데이터의 양이 많을 때
4. mvc 패턴인 react의 경우 데이터 양이 많아질 수록 데이터 흐름을 읽기 어려움 redux는 단방향 흐름이기 때문에 이를 파악하기 쉬우며 제어하기도 간단