React Redux (리액트 리덕스)

리덕스란?

 

---

리액트 뿐만 아니라 다양한 프레임워크에서 사용되는 상태관리 라이브러리이다.

리액트는 MVC (Model View Controller) 중에 View만 담당하게 되는데

나머지 Model, Controller에 해당하는 역할을 해주는 것이 Redux이다.

 

사실 이 MVC 페턴은 어플리케이션이 매우 복잡해져서

동시에 여러 Model을 업데이트하면 예상치 못한 일이 일어날 수 있는 문제가 있다.
왜냐면 너무 규모가 커지면 Model 이 다른 Model을 업데이트하거나 View가 Model을 업데이트 하거나 하는 식으로 거미줄 처럼 서로가 엮이게 되기 때문이다. 

그래서 Flux 패턴이라는 것이 등장하였으며, Redux는 이 Flux 페턴을 구현한 것이다.

 

이 Flux 패턴은 어플리케이션을 단방향으로 일관성 있게 동작하게 해준다.

코드의 흐름을 예측하기 쉽게 해주고 위와 같이 거미줄 처럼 엮이는 문제를 방지해준다.

 

사용 목적

---

1. 여러 State를 동시적으로 업데이트 해야할 때 비정상적인 상황을 방지하기 위해

 

2. 컴포넌트 사이 state를 전달할 때 너무 깊이(3단계 이상) 전달해야 하는 경우

 

 

용어

---

1. 액션 (Action)
   상태변화를 일으킬 하나의 행동이다. (1을 더해주세요, 1을 빼주세요, a를 제거해주세요)
   타입(type)과 데이터(payload)를 가진다.
2. 디스패치 (dispatch)
   액션에 해당하는 Callbcack을 실행해준다.
3. 스토어 (Store)
   모든 상태와 상태변화를 시키는 함수가 정의되어있는 곳
4. 컨트롤러 뷰 (Controller view, view) 
   구독된 스토어로 부터 변경된 상태를 전달받아서 하위 뷰들에게 새로운 상태를 넘겨줌

 

원칙

---

1. 하나의 애플리케이션 안에는 하나의 스토어(store)만 존재한다.
   여러 스토어를 구독하여 발생할 수 있는 혼란을 피하기 위해 하나의 스토어만 사용한다.
   
   
2. 상태는 읽기전용이다.
   성능 때문에 상태 변경 여부 확인 시 Shallow Compare 를 하므로 불변성을 유지해야하므로
   기존 상태는 버리고 새로운 상태 객체를 만들어서 업데이트 해줘야한다.
   
   
3. 리듀서는 순수함수여야 한다.
   똑같은 파라미터로 호출된 리듀서는 항상 동일 값을 반환해야 한다.

 

동작 방식

---

View에서 action 수행 → dispatch 는 action에 해당되는 Callback 수행 → state 업데이트