[ Redux ] 상태관리 라이브러리

# 리덕스를 왜 쓰는가?

1. 리덕는 상태관리라이브러리이다. 즉 state를 관리한다는 것인데
state = '상태' 이며, 이 '상태'라는 것은 useState를 생각하면 쉽게 이해가능하다.
데이터를 변경시켜 주고 이를 setState를 통해 rerender시켜주는 것

이라고 이해하면 된다. 그리고 이 state들을 store에 넣어서

전역으로 관리하기 위함이다.

 

store = [State의 집합체] 이다.

 

 

2. 객체의 변화(데이터의 변화)를 감지하여 간단하게 비교(shallow equality 검사)하여

객체의 깊은 변화가 아닌 겉핥기식의 변화를 비교하기 때문에 좋은 성능을

유지할 수 있는 것이 가장 큰 장점이다.

props를 연속적으로 전달받는 방식을 대신하기 위함도 크다.

# shallow equality 검사와 불변성

리덕스에서 가장 큰 이점으로 앞서 겉핥기식의 변화를 언급했었다.

이는 불변성에 의한 검사가 이뤄지면 복잡한 변경을 감지하는 것보다

더 간단하고 빠르게 구현할 수 있기 때문에 비용 역시 줄어들게된다.

 

불변성이란?

절대 변경되지않는 데이터를 말한다.

 

불변성이 성능을 높여주는 가장 큰 이유는

[ 불변성데이터의 추론 ]  <<  [ 임의로 변경가능한 데이터의 추론 ]

 

이러하기 때문에 프로그래밍 및 디버깅이 간단하게 구현가능하다.

 

# 사용예시

 

< HTML 영역 >

<button id="add">Add</button>
<span>0</span>
<button id="minus">Minus</button>

 

< JAVA SCRIPT 영역 >

import { legacy_createStore } from "redux";

const add = document.getElementById("add");
const minus = document.getElementById("minus");
const number = document.querySelector("span");

const countModifier = (count = 0, action)=> {
/* countModifier는 리듀서이며 순수함수이고, 스토어데이터를 modify시킨다.
디폴트 = 0 이며 action은 전달받을 인자 or 파라미터(매개변수)다. */

    console.log(count, action);
    if (action.type === "ADD") {
        return count + 1;
    } else if (action.type === "MINUS") {
        return count - 1;
    } else {
        return count;
    }
    
};

const countStore = legacy_createStore(countModifier);
//store를 사용할 변수에 legacy_createStore를 할당시키고 리듀서를 매개변수로 넣는다.

const onChange = ()=> {
    number.innerText = countStore.getState();
};
// 스토어에 getState를 사용해서 변경된 데이터를 re-render시킨다.

countStore.subscribe(onChange);
/* subscribe는 스토어 내부 변화를 감지한다(리스너).
변화가 감지되면 매개변수에있는 함수를 실행시킨다. */

const handleAdd = ()=>{
    countStore.dispatch({ type: "ADD" })
};
 //dispatch = 스토어의 데이터를 변형시킨다.

const handleMinus = ()=>{
    countStore.dispatch({ type: "MINUS" })
};

add.addEventListener("click", (handleAdd));
minus.addEventListener("click", (handleMinus));

 간단한 예시를 위해 버튼을 클릭하면 가운데 숫자에서 마이너스, 플러스 되도록 구현했다.