[React] Redux란?

※ 오늘의 포스팅은 생활코딩 강의를 참고했다.

Redux를 들어가기에 앞서, 불변성에 대해 공부해야되므로 서론이 많이 길다.
만약 불변성에 대한 이해가 완벽하다면, 바로 Redux로 건너뛰자.

이번 Redux를 제대로 알기위해서 생활코딩 Immutability를 먼저 듣고오자. 얼마전 리액트 프로젝트를 하나 해보고 리액트에서는 항상 객체를 복제를 사용하라고 하는데, 사실 들어도들어도 까먹게 됐었다. 그냥 아.. 코드를 이렇게 작성해야지 이런식으로만 흘러갔는데 이러한 논리를 단번에 이해시켜주는 강의였다. 먼저 Immutabilty는 mutabilty가변성의 반대인, '불변성'이라는 의미이다. 코드 작성할 때 원본을 오염시키지 않고, 복제본을 다루게되면, 원본과 복제본은 서로 독립된 상태이기 때문에 서로에게 영향을 주지 않게된다.

결과적으로 애플리케이션이 예기치않게 동작되는 버그들을 줄일 수 있다.

그런데 여기서 주의해야할점은 이렇게 불변성이 강조되다 보면, 불변성이 가변성을 뛰어넘는 발전된 개념이라고 생각하기가 쉽다. 하지만 컴퓨터라는 분야가 너무나 유연해서 기본이 가변인것이다. 그래서 이러한 가변으로 인해 생기는 문제를 개발자가 의도적으로 컨트롤 할 수 있게끔 하기위해서 불변성이 강조될 뿐, 가변성이 나쁜것은 절때 아니다. 따라서 균형이 중요하다. 어떤 하나의 장점을 극단적으로 수용하는 것이 아니라 서로 장점과 단점을 달리하기때문에 양쪽다 존재하는 것처럼 적당한 비율로, 합리적인 구조로 합성해서 마치 장점만 가진 환상을 가지게끔 하는것이 공학이 하는 일이다.

여기서 잠깐 생각해 볼 주제 :

functional programming 함수를 부품으로하는 개념
- 부품다운 모습을 지녀야한다. 즉, 언제나 똑같은 결과를 내놓아야한다.
함수는 순수한 상태(pure function)를 유지해야한다
- 이러한 순수한 상태를 유지하기 위해서는? 여러가지 조건들이 필요한데, 그 중하나는 함수로 들어가는 입력값이 예를들어서 객체라고 한다면 그 객체를 변경했을때 그 객체를 사용하고있는 외부에다가 영향을 줄 수가있다. 이것은 순수한 함수라고 할 수가없다.

그래서! Immutability를 이용하면 순수한함수(pure function)를 만들어서 좋은 부품으로 사용할 수 있는 함수를 만들 수 있게된다.

그래서 Immutability라는 목적을 달성하기위한 여러 immer, mori 등과 같은 라이브러리들이있다.

불변함이라 목적을 달성하기위해서는 내부적으로 복제와 같은 매커니즘이 필요한데 이러한 라이브러리들을 이용하게되면 여러가지 테크닉들을 이용해서 생길 수 있는 성능상의 악 영향을 낮춰주는 여러가지 좋은 기능들을 가지고있다.

여기서 이제 React가 나온다. facebook에서 웹이나 앱을 만들 때 조금 더 쉽게 만들 수 있도록 고안된 도구이다.

그런데 React 자체가 불변함과는 아주 직접적인 영향은 없지만, React에서는 화면을 그릴때 이전 데이터와 현재 데이터의 차이점을 비교하는것을 통해서 화면을 그릴지 말지를 결정한다.
그때 이전 데이터와 현재 데이터를 불변한 상태로 만들어준다면 단순한 비교연산자(===)로 데이터가 바뀌었는지 바뀌지 않았는지를 확인 할 수 있고, 그에따라서 화면에 그릴지 그리지않을지를 결정할 수 있다.
그래서 React가 이러한 특성을 가지고 있기때문에 불변함이라는 것이 중요하고, 또 불변함에대한 여러가지 논의들이 촉발되는 일종의 나비효과를 갖게된 것이 React였다.

# 함수를 부품으로 해서(순수함수를 사용해서) 개발하는 패러디임

# React와 함수형 프로그래밍 공부

# 이전 데이터와 현재 데이터를 불변한 상태로 만들어준다면 단순한 비교연산자(===)로 데이터가 바뀌었는지 바뀌지 않았는지를 확인

이제 본론으로 들어가보자.

Redux란?

(요약) 키워드로 알아보기

Redux란?

자바스크립트 애플리케이션을 위한 예측가능한 상태의 저장소라는 의미이다.
이를 풀어서 얘기해보자면 우선 예측가능한이라 함은 소프트웨어를 개발할 때 개발자를 위협하는 가장 큰 위험은 복잡성이다. 왜냐? 눈에 보이지 않기 때문이다.

따라서 코드의 복잡성을 낮추고싶어진다. 그래야 더욱 복잡한 애플리케이션을 만드는데 도전할 수 있을것이다.
따라서 Redux는 애플리케이션의 복잡성을 획기적으로 낮춰주는 역할을한다.

# 생활코딩-Redux

더 알아보기

특징 :

Single Source of Truth 즉, 하나의 상태(객체)를 갖는다
즉, '하나의 객체안에 애플리케이션에서 필요한 모든 데이터를 우겨넣는다' 이다.
state를 사용하는 여러 부품들에게 업데이트되었을시 Redux(===관리자)를 통해 손쉽게 알려주고, 철저한 관리를 한다.
- 즉, 각각의 상태가 전혀 영향없이 독립된 상태를 유지할 수 있다. UNDO, REDO
- 리덕스의 이러한 특성들을 이용하면, 핫 모듈 리로딩을 할 수가있다. 이는 코드를 작성하면 자동적으로 반영이되는것을 말한다. 단순히 반영되는것이 아닌, 더 진보된 기능을 보이는데 핫 모듈 리로딩이라는것을 이용하면 애플리케이션은 새로 리로딩이 되는데, 데이터는 그대로 남아있어서 다시 입력하는 작업이 필요 없도록 개발환경을 셋팅 할 수도있다.
- 그래서 Redux를 이용해서 애플리케이션의 상태를 이전보다 훨씬 예측가능하도록 개선할 것이다 이를통해 견고하면서도 유연한 애플리케이션을 만들 수가있다.

자~ Redux를 알기위해 지도를 챙겨서 떠나자!

아래의 그림을 보면서 전체적인 큰 흐름을 이해하자 그리고 이 흐름을 파악할때 요소들을 집중하고, 의인화해서 집중해서 보자!

https://opentutorials.org/course/4901/24935

Redux의 핵심은 store이다. store은 정보가 저장되는곳이다.
store에는 실제 정보가 state안에 저장된다.
store을 만들때 제일 먼저 해야될것은 reducer라는 함수를 만들어서 공급해줘야된다. (가장 어려운 개념의 친구 : reducer )

그 다음 중요한것은 render 이다. (내가 직접 작성하는 코드)
store에있는 state에 직접적으로 접근하는것이 불가능하기 때문에 앞단에 (은행 창구 직원 생각, 내가 직접 은행의 돈을 못가져간다.) 3가지의 중요한 함수들이있다. 그리고 이 함수와 내가 작성한 render가 어떻게 협력해서 애플리케이션을 만드는가를 볼것이다.

1) store에 있는 store에게 getState를한다. 그래서 state값을 가져온다.

2) innnerHTML를 통해서 state값을 이용해서 WEB page를 만든 다음에 실행하면, 실제로 UI를 만드는 친구가된다.

3) 그래서 render는 내부적으로 store에서 데이터를 가져오고, getState는 state값을 가져오고, getState가 render에게 값을 주는것이다. 즉, render를 실행하면 현재 state를 반영한 UI를 만든다.

그럼 이렇게 생각해볼 수가있다. store에 state값이 바뀔 때 마다 render함수를 호출 할 수 있다면 얼마나좋을까? 그럼 신경쓸 것 없이 render 함수만 잘 만들면 알아서 state값이 바뀔 때 마다 UI가 갱신되지 않을까? 가능하다.
이때 사용하는것이 바로 subscribe(구독)이다.

render함수를 subscribe에 등록하면, state의 값이 바뀔때마다 render함수가 호출되면서 UI가 새롭게 갱신된다.

그럼이제 만약 사용자가 form에 글을 작성한면 어떻게 흐름이 진행될까?

먼저 코드를 참고하자. 바로 사용자가 Submit이라는 버튼을 누르면 onsubmit이라는 이벤트가 발생했을때 store.dispatch에게 객체를 하나 전송한다. 이때 가장 중요한것은 type이 create라는 것이다. 그리고 이 ({객체 전체})를 action이라고한다. 그리고 이를 dispatch에게 전달한다.

그럼 이 dispatch는 뭘까? 이는 2가지 역할을 한다.

첫번째 역할 : reducer을 호출해서 state값을 바꾼다.
- 이때 2개의 값을 전달한다. (1. 현재의 state값 2. action에서의 전달된 객체 데이터 )
- 그리고 아래 함수 reducer에서 가공 뒤에 return해주는 객체는 state의 새로운 값이된다. 즉 reducer는 state를 입력값으로 받고, action을 참조해서 새로운 state값을 만들어내서 return해주는 state를 가공하는 가공자이다.
  그래서 state에 변경이되었으므로, 그럼 render가 다시 호출되어야된다.

두번째 역할 : 그래서 dispatch가 subscribe에 등록되어있는 구독자들을 다 호출해준다. 그러면 render가 호출이되면서 위의 일련의 행동들 즉, render -> getState -> state -> 다시 state가 -> getStete-> render -> 화면갱신이 되는 것이다.
그래서 새로운 state에 맞게 UI가 바뀌게된다. 이것이 바로 Redux가 동작하는 전체적인 흐름이다.

#핵심은 state

#그다음 핵심은 state 기반으로 화면을 그려준다.

#중간에 store에 있는 state에 직접 접속하는것은 금지되어 있으므로 getState로 값을 가져오고, dispatch를 통해 값을 변경시키고, subscribe를 이용해서 값이 변경됐을 때 구동될 함수들을 등록해준다.

#reducer를 통해서 state값을 변경한다.

Redux와 같은 시스템들을 이용하는 가장 중요한 이유에 대해 알아보자

1. 바로 중앙 집중적인 data store를 통해서 애플리케이션 구현을 복잡성을 낮추고, 쉽게 개발할 수 있다는 점이다.

2. 시간 여행을 할 수 있다. Redux DevTools

먼저 위의 그림을 살펴보자 지금 4개의 부품들이 있는데 근데 여기서잠깐! 내가 방금 부품이라고 얘기했지만 따지고 봤을 때 얘네들을 부품이라고 할 수 있을까?

결론적으로 얘네들은 부품이 아니다.
부품이란 독립성이 있어야한다. 즉, 어디나 가져다놔도 작동을 해야된다는 의미이다.
하지만 위에 보이는 부품들은 서로 강하게 종속되어있다. 그래서 나는 이제 부품이 아닌 하나의 전체로 칭하겠다.
그래서 이와같은 '하나의 전체'는 복잡성이 높아지고, 생각이 분산될 수 밖에없다.
그러면 소프트웨어가 유연하다고 할 수가 없다.

그럼 이러한 문제를 어떻게 획기적으로 개선할 수 있을까? 라고 하는것이 React가 존재하는 가장 중요한 이유인 것이다.

가운데 검은색에 Redux의 store라고 생각해보자 그리고 부품이 4개가있다.

위에는 따로 설명안했지만, 하나의 전체이므로 연결되어있을 때는 즉, 종속되어있는 모든 상태들이 다 같이 강하게 종속되어있다.

하지만 지금의 로직은 각각의 부품들은 2개의 로직만 가지고 있으면된다.

1. 상태가 바꼈을 때 그 상태를 알려줄 수 있는 로직 하나

2. 상태가 변경됐을 때 자기 자신을 변화시켜야되는 로직 하나

따라서 100개면 200개 로직이면된다. 맨 처음의 최초의 모델은 컴포넌트가 100개면 로직이 10000개가 필요했었는데 이에반해 200개 로직만 필요하면된다. 훨씬 더 애플리케이션이 단순해진것을 확인 할 수 있다.

Redux 없이 애플리케이션 만들기

이제 본격적으로 코드를 작성해가면서 배워보자!

Redux를 사용하기전에 Redux없이 애플리케이션을 만들어보자.

<!DOCTYPE html>
<html lang="en">
    <head>
...
        <style>
            .container{
                border:5px solid black;
                padding:10px;
            }
        </style>
    </head>
    <body>
        <div id="red"></div>
        <div id="green"></div>
        <div id="blue"></div>
        <script>
            function red(){
                document.querySelector('#red').innerHTML=`
                    <div class="container" id="component_red">
                        <h1>red</h1>
                        <input type="button" value="fire" onclick="
                        document.querySelector('#component_red').style.backgroundColor='red';
                        document.querySelector('#component_green').style.backgroundColor='red';
                        document.querySelector('#component_blue').style.backgroundColor='red';

                        "/>
                    </div>
                `;
            }
            red();

            function green(){
                document.querySelector('#green').innerHTML=`
                    <div class="container" id="component_green">
                        <h1>green</h1>
                        <input type="button" value="fire" onclick="
                        document.querySelector('#component_red').style.backgroundColor='green';
                        document.querySelector('#component_green').style.backgroundColor='green';
                        document.querySelector('#component_blue').style.backgroundColor='green';

                        "/>
                    </div>
                `;
            }
            green();

            function blue(){
                document.querySelector('#blue').innerHTML=`
                    <div class="container" id="component_blue">
                        <h1>blue</h1>
                        <input type="button" value="fire" onclick="
                        document.querySelector('#component_red').style.backgroundColor='blue';
                        document.querySelector('#component_green').style.backgroundColor='blue';
                        document.querySelector('#component_blue').style.backgroundColor='blue';
                        "/>
                    </div>
                `;
            }
            blue();
        </script>
    </body>
</html>

위의 코드로 각각의 버튼을 눌렀을때 관련 색으로 바꿔주도록 만들어보았다.

이제 Redux없이 만든 애플리케이션에 Redux를 적용해보도록하자

간단하게 npm으로 서버에 설치하지 않고, copy만 해서 쓸 수 있는 Redux-cdn 을 이용해보자.

Redux를 이용한다는 것을 결국 store를 만들어서 store의 상태를 바꾸는 것이 Redex의 핵심이다.
그래서 해야되는 첫 번째 순서는 ?
- 1. store를 만든다 -> 그럼 자동으로 state라는것이 생긴다.
- 2. 그다음 reduser라는 함수를 만들어서 store에 주입해준다

<!DOCTYPE html>
<html lang="en">
    <head>
    ...
		<style>
            .container{
                border:5px solid black;
                padding:10px;
            }
        </style>
    </head>
    <body>
        <div id="red"></div>
        <script>
            function reducer(){
				//
            }
            Redux.createStore(reducer); //만든 reducer함수가 들어가야한다.

			function red(){
               //전에 있던 코드 그대로 사용 
            }
            red();
        </script>
    </body>
</html>

결국 reducer 이 하는 역할은 뭐냐면 dispatch에 의해서 action이 들어오게되면 reducer이 그 action값과 기존에 있었던 state의 값을 참조해서 새로운 state값을 만들어주는것이 reducer의 역할이다. 쉽게 생각하면 아래와 같이 정리해볼 수 있다.

dispatch = 창구직원
reducer = 실제로 은행 장부에다가 누가 어떤 것을 했는지를 적는 사람!
state = 장부

이제부터는 코드 & 주석으로 읽어보자

<!DOCTYPE html>
<html lang="en">
    <head>
		...
    </head>
    <body>
        <div id="red"></div>
        <script>
            function reducer(state, action){
                if(state === undefined){//'초기화'를 위해 최초로 실행되는 Redux에 대한 호출이다.
                    return {color:'yellow'}
                }
            }
            var store = Redux.createStore(reducer); //전역변수
            console.log(store.getState()); //yellow 
            
            function red(){
                var state = store.getState(); //state 값을 가져올 수 있는 getState()

                document.querySelector('#red').innerHTML=`
                    <div class="container" id="component_red" style="background-color:${state.color}">
							...
                        "/>
                    </div>
                `;
            }
            red();
        </script>
    </body>
</html>

background-color : yellow 로 바뀐것을 확인 할 수 있다.

그럼 이제, 초기화된 state값을 변경시키는 방법을 알아보자 state를 변경시키기 위해서는 action이라는것을 만들어야된다

그리고 그것을 dispatch에게 제출하면 -> reducer를 호출하는데 그때 이전의 state값과 action의 값을 동시에 준다. 그럼 내가 정의한 reducer함수가 그것을 분석해서 state의 최종적인 값을 리턴해주면 되는 것이다.

이때 알아야 될 것은?

store의 dispatch를 호출하게되면, store를 생성할 때 제공한 reducer라고 하는 함수를 호출하도록 약속 되어져있다. 그때 이전의 state값과 전달된 action의 값을 인자로 준다.

이때 reducer안에서 현재의 state값을 바로 변경해서 return하지말고, state값을 복제하고 그 복제된 복사본을 변경한 값을 리턴하자. 그래야지만 시간여행이라던지 UNDO, REDU를 할 수 있고, 애플리케이션이 예측 가능 하게 동작 할 수가있다. 그 이유는 처음 서론에서 다룬 불변함(Immutabilty)이기 때문이다.

따라서 객체 복사 시에 assign함수를 사용 할 수있다. 간단하게는 아래와 같다. 여기서 주의할 점은 첫번째 객체로 반드시, 빈 객체를 줘야된다. 왜냐? Object.asscign의 첫번째 return 값은 첫번째 인자인 객체이기 때문이다.

이제 바꾼 전체 코드를 확인해보자.

<!DOCTYPE html>
<html lang="en">
    <head>
   		...
        <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/5.0.0-alpha.0/redux.js"></script>
		...
    </head>
    <body>
        <div id="red"></div>
        <script>
            function reducer(state, action){
                console.log(state, action);
                if(state === undefined){//'초기화'를 위해 최초로 실행되는 Redux에 대한 호출이다.
                    return {color:'yellow'}
                }
                var newState;
                if(action.type === 'CHANGE_COLOR'){
                    newState = Object.assign({}, state,{color:'red'});//state의 속성들이 첫번째 인자의 빈객체에 복제돼서 이것이 return된다.
                }
                return newState; //즉 state를 복제하고, 복제한 것의 color를 red로 준 결과를 return하는 것이다.
            }
            var store = Redux.createStore(reducer); //전역변수
            console.log(store.getState()); //yellow 

            function red(){
                var state = store.getState(); //state 값을 가져올 수 있는 getState()

                document.querySelector('#red').innerHTML=`
                    <div class="container" id="component_red" style="background-color:${state.color}">
                        <h1>red</h1>
                        <input type="button" value="fire" onclick="
                            store.dispatch({type:'CHANGE_COLOR', color:'red'});
                        "/>
                    </div>
                `;
            }
            red();
        </script>
    </body>
</html>

그래서 진짜 중요하니까! 다시한 번 redux가 하는 역할을 정리하자면?

store의 state값을 변경해준다 어떻게?
- action의 값과 이전의 state값을 이용해서 새로운 state값을 return해주면
- 그 return된 값이 새로운 state값이된다 라는 것이 핵심이다!
- 그리고 그 return하는 값은 원본의 값을 바꾸는 것이 아닌, 이전에 있던 값을 복제한 결과를 return해야지만 redux를 사용하는 여러가지 효용들을 최대한으로 활용할 수 있다!

이제 , state값이 바뀌면 그에 따라서 애플리케이션의 UI의 모습도 바뀌어야 될 것이다. 그래서 이때 필요한것은 ?

바로 render() 호출이다. 즉, state값이 바뀔 때 마다 그것을 render가 통보받아서 그 때 마다 state값을 가져와서 화면에 그려줄 수 있게 하면 되는것이다.

따라서 이때 필요한것은 subscribe(구독)에 render()를 등록해놓으면된다. 그러면 dispatch가 state값을 바꾸고 난 후, render()를 호출 하도록 약속되어 있기 때문이다.

            store.subscribe(red);
            red();

위의 코드와 같이 subscribe에red함수를 추가해주기만 하면된다.

그럼 버튼을 눌렀을 때 yellow가 red로 변경되는것을 확인 할 수 있다.

그래서 바꾼 전체적인 코드를 살펴보자면 아래와같다.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>With Redux</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/5.0.0-alpha.0/redux.js"></script>
        <style>
            .container{
                border:5px solid black;
                padding:10px;
            }
        </style>
    </head>
    <body>
        <div id="red"></div>
        <div id="blue"></div>
        <div id="green"></div>
        <script>
            function reducer(state, action){
                console.log(state, action);
                if(state === undefined){//'초기화'를 위해 최초로 실행되는 Redux에 대한 호출이다.
                    return {color:'yellow'}
                }
                var newState;
                if(action.type === 'CHANGE_COLOR'){
                    // newState = Object.assign({}, state,{color:'red'},{color:'blue'});//state의 속성들이 첫번째 인자의 빈객체에 복제돼서 이것이 return된다.
                    newState = Object.assign({}, state,{color:action.color});//state의 속성들이 첫번째 인자의 빈객체에 복제돼서 이것이 return된다.
                }
                return newState; //즉 state를 복제하고, 복제한 것의 color를 red로 준 결과를 return하는 것이다.
            }
            var store = Redux.createStore(reducer); //전역변수
            console.log(store.getState()); //yellow 

            function red(){
                var state = store.getState(); //state 값을 가져올 수 있는 getState()

                document.querySelector('#red').innerHTML=`
                    <div class="container" id="component_red" style="background-color:${state.color}">
                        <h1>red</h1>
                        <input type="button" value="fire" onclick="
                            store.dispatch({type:'CHANGE_COLOR', color:'red'});
                        "/>
                    </div>
                `;
            }
            store.subscribe(red);
            red();

            function blue(){
                var state = store.getState(); //state 값을 가져올 수 있는 getState()

                document.querySelector('#blue').innerHTML=`
                    <div class="container" id="component_red" style="background-color:${state.color}">
                        <h1>blue</h1>
                        <input type="button" value="fire" onclick="
                            store.dispatch({type:'CHANGE_COLOR', color:'blue'});
                        "/>
                    </div>
                `;
            }
            store.subscribe(blue);
            blue();


            function green(){
                var state = store.getState(); //state 값을 가져올 수 있는 getState()

                document.querySelector('#green').innerHTML=`
                    <div class="container" id="component_red" style="background-color:${state.color}">
                        <h1>green</h1>
                        <input type="button" value="fire" onclick="
                            store.dispatch({type:'CHANGE_COLOR', color:'green'});
                        "/>
                    </div>
                `;
            }
            store.subscribe(green);
            green();
        </script>
    </body>
</html>

red클릭시 전부 red로 변경, blue클릭시 blue로 모두 변경 등 이렇게 동작하게된다.

그래서 이렇게 redux를 사용하기전의 코드를 보게되면 예를들어 blue()를 보자

blue()는 red와 green을 알고있다. 그래서 종속되어져있는 즉, 커플링되어져있는 red()나 green()을 지우게된다면 error가 생길것이다.

즉, 아래와 같이 변하지않는 부분을 확인 할 수 있다.

또한 새로운 컴포넌트가 추가되면 기존의 있었던 컴포넌트 전체를 다 업데이트해야된다.즉, 강하게 커플링되어있을때 가장 큰 문제점이다

그런데 redex라는 중개자를 통해서 state(상태)를 중앙 집중적으로 관리하게되면, 각각의 부품들은 어떤 일을 주면될까?

상태가 바꼈을때 상태가 바꼈다라는 것을 즉, action을 store에게 dispatch해주면된다.
그리고 그에 따라서 자신이 어떻게 변화 돼야 되는지에 대한 코드를 아래와 같이 작성하고, store에다가 subscrebe(구독)을 시켜놓으면 state가 바뀔때마다 통보를 받기때문에 그때마다 자신의 모양을 바꿔줄 수 있는것이다.

이렇게되면blue()컴포넌트는 red()나 green()에 대해서 이해하지 않아도된다. 즉, 관련 코드가 1도 들어가 있지 않다.
그래서 blue()라는 컴포넌트를 만들때는 blue()라는 컴포넌가 해야 될 일에 대해서만 집중해서 된다 라는 중요한 효과를 얻을 수가 있게된다. (이거 이해 못하면, redux를 사용할 이유가 없다)
redux를 사용하는이유? 부품들이 어떤 부분에 있어 좋아지는가? 디커플링 한다라고 표현한다.
어떻게 redux를 통해서 서로간의 의존성을 낮추고, 각자의 부품은 standalone(독립형)으로 사용될 수 있었는가?

이제 redux를 통해 시간여행을 해보자

https://github.com/zalmoxisus/redux-devtools-extension

redux의 redux-devtools-extension 확장 기능을 설치해보자 그럼 위와같은 tool을 확인 할 수가있다.

이러한 기능은 어디서 발휘 할 수 있을까?

엄청나게 복잡한 기능이 들어있는 애플리케이션이라면 문제가 생겼을 때 어떠한 맥락 속에서 문제가 생겼는지 판단하는것이 중요하고 어려운 문제이다. 그런데 이런 dev tool을 이용하면, 아주 간편하게 할 수 있다는 것이다.
그래서 redux를 소개할 때 시간여행이 가능하다! 라고 하는 것이 redux가 대박을 내게되는 아주 중요한 역할을 했었다.
물론 redux는 store을 통해 상태를 관리하고 그것을 통해서 애플리케이션을 더 단순한 코드로 더 복잡성한 애플리케이션을 만들 수 있다라는 것이 가장 중요한 것이다. 하지만 이 것은 redex가 아니라도 다른 여러가지 기법들이 존재한다.
하지만! 이와같은 타임트래블링 즉, 시간여행이라는 기법은 redex의 엄청난 인기를 가져다준 것이다.
이러한 점을 이용해서 우리의 애플리케이션을 이용하는 사용자가 어떤 문제가 생겼을 때 그 사용자가 겪고 있는 문제의 그 상태를 그대로 다운받을 수 있고, 그것을 이용해서 어떤 문제가 생긴건지를 파악할 수 있다.
또 한가지 중요한것은 action에 의해 state가 바뀔 때 마다 바뀌는 각각의 data들은 서로 완전히 독립된 data여야된다. 그리고 이러한 독립성으로 인해서 시간여행을 할 수 있는것이다! <- 순수성 유지
만약 서로가 영향을 받아서 지저분해지게된다면 완벽하게 상태를 복원하는게 불가능해지는 한계를 가져올 수 있게된다.
그래서 이러한 불변성이라는 것이 바로 redux나, react그리고커뮤니티에서 불변성(immutabily)이 라는것이 대유행하게된 아주 중요한 이유이다.

그리고 또하나!

어떠한 action이 일어났을 때 console.log(...)를 이용해서 막 찍어가면서 확인하는데, redux는 모든 애플리케이션에서 관리해야될 때는 store에 다 보관되어지게 되어있다.

단일 store이다.
redux는 단 하나의 store을 유지한다.
그리고 그 하나의 store는 reducer를 통해 가공되기 때문에 애플리케이션의 상태가 궁금하다면 reducer을 이용하면된다.

이런식으로 말이다.

CHANGE_COLOR라는 action이 일어났고, 그 action의 값은 {... }인데, 이전의 데이터는 {color:'...'}였고, 바뀐것은 {color:'...'}로바꼈다 라고 하는 것을 일목요연하게 볼 수 있는 장점이있다.

여기까지 Redux에 대한 개념을 완료하였다.

그리고 실습코드는 GitHub link만 추가해놓았다.

redux관련 저장소

GitHub - luckyjek/TIL: Today I learned / 오늘의 학습 기록소

:bulb: Today I learned / 오늘의 학습 기록소. Contribute to luckyjek/TIL development by creating an account on GitHub.

github.com

Redux는 React와 단짝이다. React를 위해서 Redux가 시작되었다고도 말할 수 있다.

Redux가 발전하는 과정에서 점차 React로 부터 독립해서, 독립적인 상태관리 저장소로 발전하고있다. (아하!)

따라서 Redux를 배웠다면, React를 배우는 것도좋다. 그래서 한 번 도입해서 사용해보자!

Redux의 또 다른 장점은 ?

준수한 생태계
reducer는 새로운 상태를 만든다. 이때 이전 상태의 원본을 직접 바꾸지 않고, 새로운 복제본을 만들어서 그것을 수정 한다음에 복제한 것을 새로운 상태로 만들어야된다. 각각의 상태를 이렇게 완전히 독립적으로 유지하면 예기치 못한 변화로 상태의 데이터가 변경되는 사고를 막을 수 있다.

끝으로 하고싶을 말,

리덕스를 꼭 써야할까? 를 던지면서 마무리하고싶다.

조금 더 알아보자! dont-use-redux