Redux가 필요한 이유와 기본 개념

 

Redux란? 

Redux는 JavaScript app을 위한 predictable state container이다. React의 보완재 역할을 하는데, action에 반응하여 상태를 변경하기 때문에 React처럼 UI를 상태에 대한 함수로 기술하는 framework와 잘 어울린다. 

 

React에 Redux가 필요한 이유? 

React로 프로젝트를 진행했을 때, component는 local state를 가지고 application은 global state를 가지게 된다. local state는 각각의 component가 가지는 state, application은 이 state를 기반으로 만들어진다.  global state는 예를 들어, 유저의 로그인 유무에 따라 application의 state가 달리 보인다고 할 때, application 전체에서 global state는 유지, local state는 global state를 공유하게 되는 것이다. 

local state의 전달이 어려워서 

React로만 프로젝트를 진행하게 될 경우, application이 local state, global state를 관리하기 어렵다. 예를 들어, shopping mall에서 장바구니를 관리하기 위해 최상단 Component인 App.js에서 cart state를 만들고, 각각의 Component에 이를 props로 전달하여 프로젝트를 관리했다고 하자.

 

프로젝트 규모가 작을 때는 단 한 번의 data 이동으로 cart state가 전달된다. 하지만, 프로젝트의 규모가 커지고 Component 수가 늘어난다면 어떨까? 단순히 cart state를 CartItem.js로 전달하고 싶을 뿐인데, 이를 위해 cart props를 사용하지 않는 Component에도 cart props를 전달하게 된다. 

 

즉, 프로젝트 규모가 커질수록 props로 data를 전달하기 위해 위와 같은 필요 없는 data의 흐름이 생기게 된다. 그리고 만약 CartItem.js로 cart props가 제대로 전달이 되지 않을 경우, 중간에 낀 모든 Component에서 일일이 문제점을 찾아봐야 한다. 

 

global state의 유지가 어려워서 

Shopping mall을 포함한 대부분의 application에서는 로그인 기능이 구현되어야 한다. 유저의 개인 정보, 결제 정보 등이 있어야 하기 때문이다. 하지만 React만으로 프로젝트를 진행할 경우, global state를 모든 Component에 유지하기가 어렵다. 유저의 인증 정보를 모든 Component에 props로 계속해서 전달해야 하는데, 이때 복잡한 절차를 거쳐야 한다.

 

하지만 Redux를 사용하게 되면 하나의 store를 통해 global state를 포함한 모든 state를 저장하고 유지할 수 있게 되고, 원하는 Component로만 data를 전달할 수 있게 되어 위와 같은 문제가 해결된다.  

 

 

Flux 구조

Flux는 대규모 프로젝트에서 너무 복잡해지는 MVC 구조 단점을 보완하는 단방향 데이터 흐름의 구조이다. Redux는 Flux의 몇 가지 중요한 특성에 영감을 받아 개발되었다. Redux는 Flux 패턴을 좀 더 쉽고 정돈된 형태로 쓸 수 있게 도와주는 라이브러리라고 볼 수 있다.

 

Redux 기본 개념

Actions

Application의 store, 즉 저장소로 data를 보내는 방법. view에서 정의되어있는 action을 호출하면 action creators는 application의 state를 변경해준다.

 

Reducer

Action을 통해 어떠한 행동을 정의했다면, 그 결과 application의 상태가 어떻게 바뀌는지 특정하게 되는 함수. Action의 type에 따라 변화된 state를 반환하게 된다.

 

Store

'무엇이 일어날지'를 나타내는 action, action에 따라 상태를 수정하는 reducer를 저장하는 application에 있는 단 하나의 객체.

 

 

 

 

*잘 정리된 다른 분의 블로그 글을 참고, 요약했습니다. 

medium.com/@jsh901220/react%EC%97%90-redux-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0-a8e6efd745c9

React에 Redux 적용하기(1)