Introduction
Redux는 기본적으로 javascript application들의 state(상태)를 관리하는 방법이다.
Redux는 기본적으로 리액트와는 별개다.
따라서 Vue, angular 등 javascript세계 어디서든 사용할 수 있다.
이번 Redux Study를 통해서 Redux가 왜 만들어졌고, 왜 Redux를 사용해야 하고,
Redux가 application을 어떻게 향상시키는지 이해해볼것이다.
2가지 방식으로 Redux를 사용해볼것이다.
- vanilaJavascript + Redux
- ReactJs + Redux
Vanila Counter
vanilaJavascript 만을 사용하여 간단한 어플리케이션을 만들것이다.
버튼을 하나 만들고 버튼은 plus와 minus만 할것이다.
(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를 교체해볼것이다.
바로 다음 글에 말이다...
Beyond the wall