👾 Redux

01. Redux는 무엇일까?

📝1. 공식 홈페이지의 Redux 정의

• Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너이다.

• Redux는 우리가 일관적으로 동작하고, 서로 다른 환경(서버, 클라이언트)에서 작동하고, 테스트하기 쉬운 앱을 작성하도록 도와준다.

• Redux는 리액트만을 위한 라이브러리는 아니다. React 뿐만 아니라 Vue와도 잘 결합되며, 또한 순수 JS와도 결합이 된다.

---

📌2. Redux는 설치 없이 사용 가능하다.

• 밑에 한 줄을 헤더 부분에 입력하면 된다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.1/redux.js"></script>

---

02. 내가 이해한 Redux

🔎 1. Redux의 특징

• Redux는 state 객체에서 중앙 집중적으로 관리하여 애플리케이션의 복잡성을 줄여준다.

• state 객체는 외부에서 직접적으로 제어할 수 없다.
  그렇기 때문에, state의 값이 변하는 것을 막을 수 있다.

---

🔎 2. Redux의 기본적인 흐름

1. 하나의 중앙 데이터 store을 갖는다.

• store에는 저장하고싶은 사용자의 상태를 저장한다.
• store은 한 개의 프로젝트에 하나만 가질 수 있다.
• store을 만들기 위해서는 reducer 함수를 인자로 공급해줘야 한다.
• 📌생성방법 : let store = Redux.createStore(reducer);

2. 상태값을 변경해야 할 때 state의 값을 수정하기 위해 reducer 함수를 생성한다.

• reducer은 state , action 두 개의 값을 인자로 받는다.
• 이 때 state는 기존의 state 값이고 , action은 웹에서 변경된 값이다.
• reducer은 두 개의 인자를 통해 새로운 state 값을 만들어 return 한다.
• 📌생성방법 : function reducer(state, action) { }

🦁 생성 시 주의할 점 : 기존의 state 값을 변경하여 return 하지 말고 , 기존의 state를 복사하여 복사본을 변경하여 return 한다.

객체를 복사할 때는 Object.assign({}, state, ... ) 를 사용하면 된다.
📝 여기서 첫 번째 인자는 반드시 빈객체를 주고, 두 번째 인자부터는 빈객체에 복제할 속성을 가진 객체를 주면 된다.

3. dispatch를 사용하여 state의 값을 수정하라고 reducer에게 action과 함께 요청한다.

• action 객체는 반드시 type 필드를 가져야 한다.
• 그 이유는 reducer 함수가 이 type 값과 이전의 state 값을 참고하여 새로운 state 값을 만들어내기 때문이다.
• 📌예시 : store.dispatch({type:'CHANGE_COLOR'});

4. reducer가 state의 값을 수정하면 subscribe를 통해 render에게 전달하여 새롭게 수정된 부분을 UI에 갱신해준다.

• subscribe는 state 값이 바뀌면 바뀐 것을 UI에 업로드 해준다.
• 📌생성방법 및 예시 : function red() { ... 중략 ... } store.subscribe(red);

---

📝 추가로 render에 대한 이야기를 하자면.

render은 우리가 '짤' 코드이다. render은 store의 외부에 위치해 있고, state에게 직접적으로 접근할 수 없으니 getState를 통해 state의 정보를 가져오고, dispatch를 통해 값을 변경 시키고, subscribe를 통해 갱신한다.

📌 render에서 state 값을 가져오고, innerHTML을 통해 state 값을 이용해 웹 페이지를 생성한다.

• let state = store.getState();
• document.querySelector("#").innerHTML = ~