리덕스란 무엇인가

Redux (리덕스)

상태를 관리하기 위한 오픈 소스 자바스크립트 라이브러리
=> 코드의 복잡성을 낮춰주고, 어떤 결과를 가져올지 예측가능하게 만들어준다.

특징

Single Source of Truth 단 하나의 진실의 원천
- 하나의 상태(=객체) 모든 데이터를 넣는다.
- 한 곳에 데이터를 집중적으로 관리하면 여러 곳에 흩어져있는 것보다 데이터를 더 관리하기 쉬워짐
- 단 하나의 state를 유지하는 걸 통해서 애플리케이션의 복잡성을 낮춘다.

어떻게 동작하는가?

1) store : 정보가 저장되는 곳(은행같은 역할) ex) 글에 대한 정보, 글 목록에 대한 정보
2) state : store 안에 state라는 실제 정보가 저장된다. 단, 직접 접속 불가(누군가를 통해서만 접속 가능)
3) reducer⭐ : store를 만들면서 가장 먼저 reducer 함수를 만들어서 공급해줘야 함

- Redux에 createStore하면 store가 생성

- reducer 함수 → store 생성할 때 꼭 줘야하는 인자 (리덕스를 만드는 일이라고 해도 될 정도로 중요)

 

 

4) render : 리덕스랑 상관없이 ui를 만들어줄 개발자가 작성할 코드 부분(항상 state 값을 참조해서 ui를 만든다.)
5) store에 접근 하기 전에 일종의 창구 직원 역할하는 함수 => dispatch, subscribe, getState

6) render는 state 값을 참조해서 UI를 만든다.

- store에서 getState로 state값 가져와서 render에 state 데이터 값 전달

  (state 값을 직접 접속할 수 없는 이유는 망가질 수 있기 때문)

- render가 동작해서 ui를 만든다. (innerHTML을 통해 state 값을 이용해서 웹페이지를 만든 다음 실행하면 실제로 UI가 됨)

 

7) subscribe를 사용하여 state값이 바뀔 때마다 render 함수가 호출되면서 ui 새롭게 갱신
(값이 변경됐을 때 구동될 함수들을 등록)

8) submit 눌렀을 때, 객체 하나 전송 (이때, 이 객체를 action이라고 함)

 

9) action이 dispatch에게 전달한다.

10) dispatch는 2가지 역할을 한다.
- reducer를 호출해서 state값 변경 시킴 (reducer에 현재 state, action 전달)
- reducer에서 return하는 객체는 state의 새로운 값이 된다.

=> reducer는 state를 입력 값으로 받고, action을 참조해서 새로운 state값을 만들어 return해 주는 가공자

 

11) render가 다시 호출되고, 이후 subscribe를 이용해서 render 함수를 호출하면 새로운 state에 맞게 UI가 갱신된다.