[Redux] 사용했을때 장점

일반적인 웹, 앱에서 데이터를 활용하는 방식

1. 데이터를 가져옴 (fetch)
2. 저장 (store)
3. UI 구현
4. 데이터 변경

서버로 부터 가져온 데이터를 표현하고 사용자 액션에 따라 적절히 업데이트 시켜주는 것

 

위와 같이 데이터를 활용하기 위해 React만으로도 충분합니다. React의 데이터 흐름은 단방향이기 때문에, 부모 컴포넌트 레이아웃 안에 존재하는 자식 컴포넌트들은 부모 컴포넌트의 상태를 props로 전달받게 됩니다. 그러다 부모 컴포넌트의 상태값이 변하게 되면, 자식 컴포넌트들은 변화된 상태에 맞게 data 혹은 UI를 변경합니다.

 

컴포넌트들은 다음과 같은 몇 가지 상황에서 리랜더링 됩니다

1. 자신의 상태(state)값이 변경될 때
2. 부모 컴포넌트가 리랜더링될 때
3. 자신이 전달받은 props값이 변경될 때
4. 강제 업데이트(forceUpdate)함수가 실행될 때

위와 같은 상황에서 부모 컴포넌트의 상태값이 변한다면, 부모 컴포넌트는 리랜더링 될 것이고, 자식 컴포넌트들 또한 리랜더링 되게 됩니다. 그렇기 때문에 우리는 상태를 관리하는 데 있어서 상태 구성 요소를 최소화하기 위해 노력해야 하고 그래야 관리하기도 쉬워집니다.

https://analogcoding.tistory.com/167

React를 사용하면서, 상태 관리를 하는 것은 매우 중요한 요소 중 하나입니다. 리액트로 만들 수 있는 단일 페이지 애플리케이션(SPA, Single Page Application)는 data 혹은 UI 변화가 복잡, 다양해지는 경우가 많아집니다. 그에 따라 단일 페이지를 이루는 컴포넌트들의 데이터 교류 또한 복잡해지기 때문에 효율적으로 관리할 방법이 필요했습니다.

 

Redux를 사용하면 한번 호출된 데이터는 store에 저장됩니다. 즉 데이터를 부모 컴포넌트에서 최하위 자식 컴포넌트까지 상태를 전달해주지 않아도 되기때문에 불필요한 과정이 사라지게 됩니다. store에 데이터가 있다면 불필요한 컴포넌트들을 거치게 되는 과정없이 데이터를 곧바로 전달할 수 있습니다. 이는 불필요한 리랜더링도 방지하며 유지, 보수에도 용이합니다.

 

Redux를 사용했을때 장점은 다음과 같습니다

1. 사용자가 어떤 액션을 했고, 어떤 데이터가 어떻게 변경되었는지 쉽게 관찰할 수 있습니다.
이 모든 내용은 기록되고, 개발자는 이전의 특정 상태로 돌아가볼 수 있습니다. 버그가 나기 이전 상태로 돌아가서 테스트를 해볼 수 있습니다
2. 많은 사용자들이 동시에 다양한 작업을 하는 협업 과정에서 큰 힘을 발휘합니다.
다른 기기에서 다른 사용자들이 실행하는 액션을 받아 로컬의 작업과 병합해 보여줍니다.
3. 모든 데이터를 스토리지에 저장하는데 용이합니다.
사용자는 브라우저를 종료하고 다시 들어와도 완전히 동일한 시점부터 다시 진행할 수 있습니다