001 Redux의 개념

😳 Redux란?

👉 Redux는 "action(액션)"이라는 이벤트를 사용하여 애플리케이션 상태를 관리하고 업데이트하는 패턴과 라이브러리이다.
👉 전체 애플리케이션 내에서 사용해야 하는 상태에 대한 중앙 저장소 역할을 하며, 상태 업데이트를 예측 가능한 방식으로 제어한다.

 

 

😳 왜 Redux를 사용하는 것일까?

👉 중앙화된 상태 관리

 : 리덕스는 애플리케이션의 상태를 중앙에서 효율적으로 관리할 수 있는 중앙 저장소를 제공하기 때문에 상태를 한 곳에서 관리하고 업데이트하는 것이 쉬워진다.

👉 예측 가능한 상태 업데이트

 : 리덕스는 순수 함수인 리듀서를 사용하여 상태를 업데이트하므로 상태 변경이 예측 가능하며, 어떻게 변화하는지 이해하기 쉽다.

👉 디버깅

 : time-travel 디버깅 기능을 활용하면 이전 상태와 액션을 살펴보며 버그를 찾고 애플리케이션 동작을 이해하는데 도움을 준다.

👉 미들웨어 지원

 : 리덕스는 미들웨어 시스템을 제공하여 액션이 리듀서에 도달하기 전에 중간에서 액션을 가로채고 수정할 수 있는 기능을 제공하는데, 이 기능은 API 호출과 같은 비동기 작업을 처리하는데 유용하다.

👉 애플리케이션 확장

 : 애플리케이션의 규모가 커질수록 상태 관리가 더 복잡해지는데 리덕스는 이러한 복잡성을 효과적으로 다루기 위한 확장 가능한 해결책을 제공한다.

👉 테스트

 : 리덕스 코드는 액션과 리듀서가 순수 함수로 작성되므로 테스트하기 쉽다. 상태 관리에 대한 단위 테스트를 쉽게 작성할 수 있다.

 

 

⚡ Redux의 핵심개념 ?

👉  스토어(store)

  - 리덕스의 중심이자 핵심 데이터 저장 공간

  - 애플리케이션의 전역 상태를 스토어에 저장하고 관리한다.

👉  액션(Action)

  - 애플리케이션에서 스토어로 데이터를 보내는 객체

  - 주로 애플리케이션에서 상태를 변경하기 위한 정보를 포함한다.

  - 액션은 type속성을 가지며, 다른 데이터를 포함할 수도 있다.

👉  액션 생성자(Action Creator)

  - 액션 생성자는 액션 객체를 생성하는 함수

  - 리덕스에서 액션을 보내려면 액션 객체를 생성해야 하며, 이를 간편하게 만들어주는 역할을 한다.

👉  리듀서(Reducer)

  - 리듀서는 순수 함수이다.

  - 리듀서는 스토어의 상태 변화를 다루는 역할을 한다.

  - 애플리케이션 내부에 여러 개의 리듀서가 존재할 수 있고, 이를 결합하여 루트 리듀서를 만들 수 있다.

🤙 리듀서 함수는 순수한 함수여야 하는데, 순수함수에는 지켜야 하는 규칙이 있다.
 - 리듀서 함수는 현재 상태와, 액션 객체를 파라미터로 받는다.
 - 기존 상태는 수정해서는 안되고 대신 기존 상태를 복사하고 복사한 값을 수정해야 한다.
 - 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과값을 반환해야 한다.

👉  디스패치(Dispatch)

  - 디스패치는 스토어가 액션을 받아서 리듀서로 전달하고 상태를 업데이트하는 과정이다.

  - 액션을 디스패치하면 리듀서가 실행되어 새로운 상태(state)가 생성된다.

👉  구독(Subscribe)

  - 스토어의 메서드 중 하나로, 스토어의 상태 변화를 감지하고 업데이트를 수신할 수 있게 해준다.

  - 스토어의 상태가 변경될 때마다 등록된 subsriber 함수들이 호출되어 UI를 업데이트하거나 추가적인 작업을 수행한다.

👉  미들웨어(Middleware)

  - 리덕스의 액션 디스패치와 리듀서 사이에서 동작한다.

  - 액션이 디스패치된 후 리듀서에 도달하기 전에 미들웨어에서 추가적인 작업을 수행할 수 있다.

  - 미들웨어는 액션을 가로채거나 변형하고, 비동기 작업을 처리하며, 로깅 및 분석을 수행하는 데 사용된다.

 

 

---

참고

https://react.vlpt.us/redux/

6장. 리덕스 · GitBook

https://ko.redux.js.org/tutorials/fundamentals/part-4-store

Redux 기반, Part 4: Store | Redux