Redux

🔥 Redux

🌈 Redux ?

Redux는 JavaScript 어플리케이션에서 data-state 와 UI-state 를 관리해주는 도구
상태적 데이터 관리가 시간이 흐름에 따라 복잡해질수도 있는 싱글 페이지 어플리케이션 (Single Page Application) 에서 매우 유용하게 사용됩니다. 그리고, Redux는 React 외에도, jQuery 혹은 Angular 를 사용하는 어플리케이션에서도 사용 될 수 있습니다.

React 에서 데이터흐름은 단일 방향으로만 흐른다
parent-child 관계를 통하여 데이터를 교류하는 방법의 단점:
컴포넌트 갯수 증가의 경우 또는
컴포넌트들의 관계가 parent-child 관계 아닐 경우
==> 복잡해진다
빨간색이 파란색과 초록색의 데이터를 받아오려면 복잡해진다.

해결방안의 하나: MVC 디자인 패턴 중 FLUX 패턴

⚡️ MVC 디자인 패턴

MVC 패턴은 Controller, Model, View 이 3가지 개념으로 이뤄져있습니다. 어떠한 Action 이 입력되면, Controller은 Model이 지니고 있는 데이터를 조회하거나 업데이트 하며, 이 변화는 View 에 반영되는 구조입니다. 또한, View에서 Model의 데이터에 접근 할 수도 있습니다.

🤔 Model과 View가 늘어난다면 ?

무한루프가 발생할 수도,, 어디서 잘못된건지 찾기도 힘들다
위 문제를 해결하기 위해서 FLUX 라는 디자인 패턴이 만들어졌습니다.

⭐️ FLUX 패턴

시스템에서 어떠한 Action 을 받았을 때, Dispatcher가 받은 Action들을 통제하여 Store에 있는 데이터를 업데이트합니다. 그리고 변동된 데이터가 있으면 View 에 리렌더링합니다.
그리고, View에서 Dispatcher로 Action을 보낼 수도 있죠

Dispatcher은 작업이 중첩되지 않도록 해줍니다. 즉, 어떤 Action이 Dispatcher를 통하여 Store에 있는 데이터를 처리하고, 그 작업이 끝날 때 까지 다른 Action들을 대기시킵니다.

🚀 Redux

Redux는, 위에서 설명된 Flux 아키텍쳐를 좀 더 편하게 사용 할 수 있도록 해주는 라이브러리입니다. 이 라이브러리를 사용하면 데이터 관리를 다음과같이 편하게 할 수 있게됩니다.

위와 같이, store에서 모든 데이터를 담고 있고, 컴포넌트끼리는 직접 교류하지 않고 store 중간자를 통하여 교류합니다. 빨간 화살표는 dispatch 를 의미하며 store에 있는 데이터를 업데이트 하는것을 가르키고, 주황색 화살표는 subscribe를 의미하며, 해당 컴포넌트에서 store에 있는 특정 데이터의 변동을 주의하고있다가 변동이 있을시 바로 반영시키는것을 가르킵니다.

📌 Redux 의 3가지 원칙

1. Single Source of Truth (단 하나의 진실의 근원)

Redux는 어플리케이션의 state를 위해 단 한개의 store 를 사용합니다.
Flux 와의 주요 차이 입니다. Flux 에서는 여러개의 store 를 사용합니다.)

2. State is read-only (State는 읽기전용이다)

어플리케이션에서 state를 직접 변경 할 수는 없다는 의미입니다.
state 를 변경하기 위해서는, action 이 dispatch 되어야 합니다.(dispatch 는 ‘보낸다’는 뜻 입니다)
action 은 어떤 변화가 일어나야 할 지 알려주는 객체

3. Changes are made with Pure Functions (변화는 순수 함수로 만들어져야 한다)

받아온 action 객체를 처리하는 함수를 Reducer 라고 부릅니다.
action은 어떤 변화를 일어나야 할 지 알려주는 객체라면, Reducer 는 그 정보를 받고 애플리케이션의 상태를 어떻게 바꿀지 정의한다고 볼 수 있습니다.

Reducer 는 ‘순수 함수’ 로만 작성

순수함수여야하는 이유:

Redux는 두 객체(prevState,newState)의 메모리 위치를 비교하여 이전 객체가 새 객체와 동일한지 여부를 단순 체크한다(shallowCompare,===). 만약 리듀서 내부에서 이전 객체의 속성을 변경하면 새 상태 와 이전 상태가 모두 동일한 객체를 가리킨다. 그렇게 되면 리덕스는 아무것도 변경되지 않았다고 판단하여 동작하지 않는다.

그렇다면 바뀐 속성만 비교하면 되지 왜 주소를 비교하는 걸까? 라는 의문이 생긴다. 그 이유는 성능과 복잡도에 영향을 미치기 때문이다. 위의 예제와는 다르게 덩치가 큰 객체를 비교해야 되는 상황이면 객체의 주소 비교라면 O(1) 만큼 비교를 하면 되지만, 속성을 비교하게 된다면 O(n)만큼 비교를 해야되기 때문에 시간이 오래 걸린다.

🔥 React-Redux에서 나오는 개념

react-redux가 제공하는 함수는 대부분 연결하는 기능을 제공한다.

💡 Provider

• Provider는 connect() 함수에 포장 된 모든 컴포넌트가 Redux Store를 사용할 수 있게 한다.
• 그렇기 때문에 대부분의 어플리케이션은 전체 앱의 최상위 레벨에서 Provider를 렌더링한다.
• Provider의 Props로는 store가 있으며, 이는 어플리케이션의 Redux Store이다.

import React from "react";
import ReactDOM from "react-dom";
// Provider는 react-redux 라이브러리에서 가져온다.
import { Provider } from "react-redux";
// createStore는 redux에서 가져온다.
import { createStore } from "redux";
import App from "./components/App";
import reducers from "./reducers";
ReactDOM.render(
// connect()함수에 포함된 모든 컴포넌트가 redux store를 사용할 수 있기 위해,
// Provider는 최상위 레벨에서 렌더링 된다
// provider의 props로 store가 있으며 redux store를 할당한다.
  <Provider store={createStore(reducers)}>
    <App />
  </Provider>,
  document.querySelector("#root")
);

💡 connect()

• connect() 함수는 React 컴포넌트를 Redux Store에 연결한다.
• connect()로 연결한 컴포넌트는 필요한 데이터(state)를 store에서 받아온다.
• connect()를 통해 컴포넌트의 이벤트로 호출 된 action을 store로 보낼 수 있다.(dispatch)

1. connect() 함수를 'react-redux' 라이브러리에서 가져온다.
2. 'export default connect()(예시컴포넌트)' 형태로 컴포넌트를 connect()함수로 연결한다.
3. (connect()의 첫번째 인자로 mapStateToProps, 두번째 인자로는 reducer에 전달할 action을 넣는다.)

보기엔 어색하지만,
function connect()()는 유효한 자바스크립트 코드이다.

function connect(){
  return function(){
    return '안녕'
  }
}
connect()() // '안녕'

💡 mapStateToProps

• connect() 함수의 첫번째 인자로 전달된다.
• store 내부의 모든 state값을 받으며, 컴포넌트가 필요로 하는 데이터를 객체를 반환한다.
• 연결된 컴포넌트에서 필요한 데이터(state)를 선택하는데 사용된다.
• store의 상태가 바뀔 때마다 호출된다.

// 컴포넌트 생성 코드의 외부에서 mapStateToProps 사용(store 에서 데이터 받아오기)
const mapStateToProps = (state) => {
  return {
    //받아올때 쓸 state의 이름' : state.'reducer에서 정한 데이터 이름' 
    needData : state.needData
  }
}

💬 헷갈렸던 부분

import React, {Commponent} from 'react'

여기서, 왜 React는 {}가 없고 왜 Component 부분은 {}가 있을까?

import React from 'react'

• 이것은 default import 를 말한다.
• 우리가 함수 혹은 클래스 앞단에 설정을 할 떄, 'export default' 혹은 'export' 같은 것들을 쓴 기억이 있을 텐데, 'export default' 를 쓸 때는 위와 같이 사용 할 수 있다.
• 그리고 오직 한개만 가능하다.

import { Component } from 'react'

• 위와 다르게 이것은 member import(named import) 라고 부르고, member import는 export 될 때, export 를 사용하고, 여러개의 member export가 가능하다.

/config.js

const a = 0;
const b = 1
export { a };
export const c = 2;
export default b;

import f, {a, c as two} from '/config';
console.log(f, a, two)	// 1, 0, 2

export default로 선언된 변수는 중괄호 {} 없이 받아올 수 있으며 변수명이 달라도 된다

export default b = f = 1

단지 export로 선언된 변수들은 중괄호 {}로 받아와야 하고, 변수명이 동일해야 한다

변수명을 바꾸고 싶은 경우에는 c as two 처럼 as를 이용해서 바꿀 수 있다

출처

https://velopert.com/1225
https://velopert.com/3401
https://velopert.com/3486
https://ideveloper2.tistory.com/159
https://velog.io/@velopert/Redux-3-%EB%A6%AC%EB%8D%95%EC%8A%A4%EB%A5%BC-%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%99%80-%ED%95%A8%EA%BB%98-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-nvjltahf5e
https://stackoverflow.com/questions/36084515/how-does-shallow-compare-work-in-react
https://velog.io/@mokyoungg/Redux-react-redux-react-redux
https://redux.js.org/faq/immutable-data#what-are-the-benefits-of-immutability