React Redux (리액트 리덕스)

snowman95 2021. 11. 18. 23:58

728x90

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

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

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

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

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

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

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

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

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

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

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

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

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