Redux - 기초 개념

Redux란?

• 자바스크립트 앱을 위한 예측가능한 상태의 저장소
• 코드의 결과가 어떻게 나올지 좀 더 잘 예측할 수 있도록 도와줌으로서 코드의 복잡성을 낮춘다
• 하나의 state(상태)를 갖고, 해당 state들이 저장되는 store에 앱에서 필요한 모든 데이터를 넣고 관리하는 것으로 복잡성을 낮춘다.
• 외부로부터 철저히 차단되어 인가된 담당자(=함수)만을 통해 관리가 가능하다
• 작동하는 원리를 응용해 UNDO, REDO와 같은 기능도 수행이 가능하다.
• 앱을 리프래쉬해도 데이터(상태)는 살아있어 재입력을 할 필요가 없는 핫모듈리로딩을 할 수 있다.

---

Redux의 구성요소

출처 : 생활코딩 Redux 강의 (https://www.youtube.com/watch?v=F_NLNBOqZrQ&list=PLuHgQVnccGMB-iGMgONoRPArZfjRuRNVc&index=4)

• store : 정보가 저장되는 곳. 앱을 구성하며 생기는 동적 정보들이 들어가는 곳.
• state : 실제정보로, 절대로 해당 state에 직접 접속하여 읽기, 쓰기 작업을 수행하는 것은 불가능하다.
• reducer : redux에서 가장 핵심적인 역할을 하는 요소. dispatch로부터 현재의 state값과 action data를 받아 이를 기반으로 작업을 수행하고 새로운 state를 리턴한다.
• dispatch : reducer를 호출해 state값을 바꾸고 subsribe를 이용해 render함수들을 호출해 필요한 화면을 갱신한다. 이 때 현재의 state값과 action data를 reducer에게 전달한다.
• subscribe : state값이 변경될때마다 내부에 등록해놓은 render가 호출될 수 있도록 하는 역할을 수행한다.
• getState : state 값을 가져오는 역할을 수행한다.
• action : 사용자가 수행하는 행위에 대한 정보가 담겨있는 객체
• render : store바깥에서 UI를 만들어주는 역할을 하는 코드. 내부적으로 getState를 통해 현재 state를 반영해서 UI를 형성한다. subscribe에 이러한 render를 등록해놓으면 store의 state값이 바뀔 때마다 호출된다.

---

redux를 사용하는 이유

• 서로 상호작용하는 객체들을 만들 때 객체의 개수가 늘어나면 늘어날수록 각자의 관계에 대해 처리해주어야 할 일들이 많아지고 하나가 삭제되었을 때 수정해줘야 할 로직의 양도 많다. 즉, 서로의 종속성이 늘어나 각각의 객체가 하나처럼 묶여있게 된다. 이에 따라 소프트웨어의 유연성이 떨어진다.
• 하지만 redux를 사용해 store에서 state를 관리한다면 각자의 객체가 state가 변경되었을 때의 로직이 있기 때문에 서로간의 종속성이 없어져 복잡성이 현저히 줄어들게 된다.
• 심지어 변화의 상태를 지속적으로 저장해 time-traveling과 같은 기능도 사용할 수 있다. 파일로 state를 다운하고 import하면 그 상태를 쉽게 복원해주기도 한다.

---

참고 : https://www.youtube.com/watch?v=F_NLNBOqZrQ&list=PLuHgQVnccGMB-iGMgONoRPArZfjRuRNVc&index=4