concept/React, Redux, RN

Redux - 2

오연 : Oana 2020. 12. 10. 03:01

출처: 생활코딩

 

리덕스를 쓰면 좋은 이유

 

간단한 애플리케이션 생활코딩 참고 가능 www.youtube.com/watch?v=ijdFixuK1nI&list=PLuHgQVnccGMB-iGMgONoRPArZfjRuRNVc&index=5&ab_channel=%EC%83%9D%ED%99%9C%EC%BD%94%EB%94%A9

 

 

1. n제곱에서 2n으로 시간복잡도가 줄어듬

 

2. 시간여행을 할 수 있음

크롬 개발자 도구에서 리덕스 데브 툴을 쓰면 애플리케이션 상태 변화 과정을 볼 수 있음

 

=> 즉, 리덕스를 이용함으로써 중앙집중적인 데이터 스토어를 통해서 애플리케이션을 쉽게 개발할 수 있다.

 

리덕스가 없다면?

 

아래와 같이 똑같은 코드를 계속 반복해야함 (간단한 앱 만들 때 참고 하기)

<html>
    <body>
        <style>
            .container{
                border:5px solid black;
                padding:10px;
            }
        </style>
        <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 = 'green';
            ">
        </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>