생활코딩 - Redux

 

♑️ 시작하기전에

 

리액트 클론 코딩을 진행하면서 Redux에 대한 개념이 희미하게 잡혔다고 생각하는데 이고잉님 수업을 들으면서 다시 한 번 짚어가보자.

 

 

 

Redux

Single Source of Truth "하나의 상태"를 갖는다.

 

How?

• 인가된 사용자만이 (dispatch, useReducer)를 통해서 데이터를 보낼 수 있다.
• getState를 통해서 데이터를 가져갈 수 있다.

 

예시

 

---

 

리덕스를 쓰면, 상태 관리를 컴포넌트 바깥에서 한다!

 

스토어 설정

리덕스를 프로젝트에서 적용하면 스토어라는 녀석이 생겨 스토어 안에는 프로젝트의 상태에 관한 데이터들이 담겨 있다.

 

 

컴포넌트의 스토어 구독

컴포넌트 하나가 스토어에 구독을 합니다. 구독을 하는 과정에서, 특정 함수가 스토어한테 전달이 됩니다. 그리고 나중에 스토어의 상태값에 변동이 생긴다면 전달 받았던 함수를 호출해줍니다.

 

 

스토어에 상태 변경하라고 알려주기

이제 다른 컴포넌트에서 어떤 이벤트가 생겨서 상태 변화 할 일이 생겼다면, dispatch라는 함수를 통해 액션을 스토어한테 줍니다. 액션은 상태에 변화를 일으킬 때 참조할 수 있는 객체입니다. 액션 객체는 필수적으로 type이라는 값을 가지고 있어야 합니다.

 

 

리듀서를 통하여 상태를 변화시키기

액션 객체를 받으면 전달받은 액션의 타입에 따라 어떻게 상태를 업데이트 할 지 정의를 해주어야 하는데, 이러한 업데이트 로직을 정의하는 함수를 리듀서라고 합니다.

리듀서 함수는 두가지 파라미터를 받습니다. (1. state: 현재 상태 2. action: 액션 객체)

 

 

상태에 변화가 생기면, 구독하고 있던 컴포넌트에게 알림

상태에 변화가 생기면 이전에 컴포넌트가 스토어한테 구독할 때 전달해줬던 함수 listener가 호출됩니다. 이를 통하여 컴포넌트는 새로운 상태를 받아서 컴포넌트는 리렌더링을 하게 됩니다.

 

 

 

 

---

 

 

 

순수한 Redux만을 살펴보는 수업

 

Redux 여행의 지도

 

state와 render의 관계

가정을 해보자. store라는 은행이 있다.

• '정보'들은 이 store라고 불리는 은행 안에 저장되어 있다.
• 사실 실제 정보는 state에 저장되어 있고, 이 state에 우리는 직접 접근이 불가능하다.
• reducer라는 함수를 작성한다.
• render는 redux와 관계없는 우리들의 코드
• '클라이언트'인 우리와 state의 접근을 도와줄 중요한 세가지 함수-dispatch, subscribe, getState

| subscribe

• state값이 바뀔 때마다 render가 갱신된다면 얼마나 좋을까? 

 

 

action과 reducer

| dispatch

• action이란 객체가 dispatch에게 전달된다

1. reducer를 호출해서 state값을 바꾼다. (2개의 값을 전달-현재state, action의 값)
2. subscribe를 이용해서 render함수를 호출

---

→ 다시 말하자면, reducer는 state 입력값으로 받고, action을 참조해서 새로운 state값을 만들어서 리턴해준다. (가공자)

 

 

Redux가 좋은 가장 중요한 이유

Redux와 같은 시스템이 제공하는 혁명적 이유

 

서로 상호작용하는 부품들이 늘어날수록 점점 더 많은 로직들이 필요해진다. 부품이 하나 추가될 때마다 작업량이 기하급수적으로 늘어나게 될 것이다.

각 부품들이 서로 강하게 연결되어있기 때문에, 부품이 아닌 하나의 전체로 동작하기 때문에 코드의 복잡성이 높아진다.

 

이때 리덕스가 존재하는 이유-로직의 단순성을 보자.

1-리덕스의 스토어에 데이터가 달라짐을 알려주는 코드

2-스토어는 나머지 부품 전체에게 상태가 바뀌었으니 '알아서' 업데이트하라고 통보한다.

3-각 부품들은 알아서 업데이트가 된다.

 

∴ 로직은 각각 2개씩 필요하다.

 

리덕스만의 시간여행 ⌛️

"Redux Dev Tool" 

리덕스의 시간여행

 

Redux가 없다면

이렇게 하나의 function blue가 추가될 때마다 red와 green에도 함께 추가되어야 한다.

 

 

---

 

Redux의 적용

 

먼저 리덕스 환경을 설치해준다.

 

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

 

 

 

정리하자면,

• store을 만들면 내부적으로 state값이 생기고, 이 state값을 가져올 때는 getState를 써야한다.
• reducer를 통해서 state 값을 만들어줘야하는데, 그때 'undefined'는 초기화를 위해서 최초로 실행되는 호출이다.
• 원하는 초기값을 리턴해주면 리덕스의 스토어에는 그 초기값이 지정된다.
• 가져온 state값으로 초기 색을 지정할 수 있어진다.

 

reducer와 action을 이용해서 새로운 state 값 만들기

{※시간여행과 같은 리덕스의 기능을 위해서, 현재 store의 state의 값을 변경해서 return X, state 값을 복제해서 복사한 값을 return해준다.}

 

불변함 Immutability 

와 관계가 있다. 아래 수업 참고,

https://opentutorials.org/module/4075

JavaScript Immutability

 

 

중요한건 이부분 ↓

 

 

 

newState = Object.assign({}, state, {color: 'red')}

 

state를 복제하고, 그 복제한 것에 color를 red로 변경한 값을 리턴하는 것.

reducer가 실행될 때마다 return 되는 값은 새로운 state값을 실행하는 데, 이때 return값은 독립적인 각각의 새로운 state값이 된다.

 

 

 

 

Redux 선물🎁 : 시간여행과 로깅

 

Redux DevTools

 

요기에서 받아준다.

https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en 

Redux DevTools

 

이것도 추가(+)

 

불변이라는 특성

action에 의해서 state가 바뀔 때마다 바뀌는 각각의 데이터는 완전히 독립된 "stand-alone"된 데이터여야 한다.

순수성이 보장되지 않는다면, 시간여행이 불가능해질것이다.

 

 

---

실전 Redux

앞서 배운 내용을 바탕으로 Redux를 이용한 간단한 예제를 만들어보자.

예제 소스는 아래 깃헙 ↓

 

https://github.com/sohyuna0113/redux.git

GitHub - sohyuna0113/redux: Simple Example using HTML, CSS, Javascript and Redux