ReduxStudy(Introduction)

이승훈·2022년 10월 25일
0

TIL

목록 보기
11/32
post-thumbnail

Introduction

Redux는 기본적으로 javascript application들의 state(상태)를 관리하는 방법이다.

Redux는 기본적으로 리액트와는 별개다.

따라서 Vue, angular 등 javascript세계 어디서든 사용할 수 있다.

이번 Redux Study를 통해서 Redux가 왜 만들어졌고, 왜 Redux를 사용해야 하고,

Redux가 application을 어떻게 향상시키는지 이해해볼것이다.

2가지 방식으로 Redux를 사용해볼것이다.

  1. vanilaJavascript + Redux
  2. ReactJs + Redux

Vanila Counter

vanilaJavascript 만을 사용하여 간단한 어플리케이션을 만들것이다.

버튼을 하나 만들고 버튼은 plus와 minus만 할것이다.

Untitled

(index.html)
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <title>Vanila Redux</title>
  </head>
  <body>
    <button id="add">Plus</button>
    <span></span>
    <button id="minus">Minus</button>
  </body>
</html>
(index.js)
const add = document.getElementById('add');
const minus = document.getElementById('minus');
const number = document.querySelector('span');

let count = 0;

number.innerText = count;

const updateText = () => {
  number.innerText = count;
}

const handleAdd = () => {
  count = count + 1;
  updateText();
};

const handleMinus = () => {
  count = count - 1;
  updateText();
};

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

위의 코드는 그냥 바닐라 JS 이다.

하지만 HTML에 뭔가가 바뀌었다고 알려주기 위해 함수를 쓴다는 것 자체가 리덕스가 멋진 이유 중 하나이다.

자 이제 아주 심플한 Redux로 위의 바닐라 JS를 교체해볼것이다.

바로 다음 글에 말이다...

profile
Beyond the wall

0개의 댓글