Steady Dev - TIL

Redux?

flux 아키텍쳐를 이용하는 Javascript 상태관리 라이브러리입니다.

Redux data flow

redux data flow

Redux의 3대 원칙

  1. 어플리케이션 상태는 모두 한곳에서 집중 관리됩니다.

    여기서 말하는 한곳이란, Store를 의미합니다. 별도의 컴포넌트마다 동기화가 필요없이 store에서 각각에 연결되어 있는 컴포넌트에게 일괄적으로 처리를 하게 됩니다.

  2. 상태는 불변하며, 오직 Action만이 상태교체를 요청할 수 있습니다.

    상태는 불변 데이터이다. 만약 상태를 교체해야되는 상황이 생긴다면, 그 요청은 Action에서만 가능하다. 그리고 그 요청으로 Reducer가 상태를 변경해줍니다.

  3. 변화는 순수함수(Reducer)로 작성되어야 합니다.

    Action에 의해 상태 트리가 어떻게 변화하는지 지정하기 위해 Reducer를 작성해야 합니다. Reducer는 이전 state와 Action을 받아 다음 상태를 반환하는 순수함수입니다.

    이전 상태를 변경하는 것이 아니라, 새로운 상태 객체를 생성해서 반환해야 한다는 사실을 기억해야 합니다.

Redux 장점

  • 상태를 예측 가능하게 만듭니다. (순수 함수를 사용하기 때문)
  • 유지보수에 용이합니다.
  • 디버깅에 유리합니다.
  • 테스트를 붙이기에 용이합니다. (순수함수를 사용하기 때문)

Redux 단점

  • 복잡합니다.

Redux를 사용하면 좋은 경우

  • 앱의 여러 위치에서 필요한 많은 양의 상태들이 존재할 때 (전역 상태가 필요하다고 느껴질 때)
  • 상태들이 자주 업데이트 될 때
  • 상태를 업데이트 하는 로직이 복잡할 때
  • 앱이 중간 또는 큰 사이즈의 코드를 갖고 있고 많은 사람들에 의해 코드가 관리될 때
  • 상태가 업데이트되는 시점을 관찰할 필요가 있을 때