Redux #0 | Vanilla Counter

학습 목표 (시리즈)

• 대표적인 상태관리 라이브러리 Redux 를 학습합니다.
• VanillaJS, ReactJS 와 Redux 를 함께 사용합니다.
• Redux 의 기초이론을 학습합니다.

Vanilla Counter

개요

• Redux 를 사용하지 않고 동작하는 Counter 를 구현합니다.

코드

// index.js

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

let count = 0;

number.innerText = count;

// repaint 역할을 하는 함수
const updateText = (count) => {
  number.innerText = count;
};

const handleAdd = () => {
  count += 1;
  updateText(count); // 리페인트 함수 호출
};

const handleMinus = () => {
  count -= 1;
  updateText(count); // 리페인트 함수 호출
};

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

덧붙임

vanillaJS Counter 구현에 대해서

• 충격입니다. 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
• 프로그래머스 채용프로그램 과제테스트에서 JS 로 SPA 를 구현하는 방법을 몰라서 지원을 못 했는데, 방법을 이제 알았습니다.
• 리액트의 리렌더링처럼 리페인팅을 하려면 리페인팅(리렌더링)을 해주는 함수를 만들어서 사용하면 되는 것 이였습니다.!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Redux 학습의 마음가짐에 대해서

• 사실 Recoil 을 사용하면서 부족함을 느낀적이 없었습니다.
• 하지만 Redux 가 아직 여러 회사에서 사용되고 있기도하고 근본(?)의 느낌이 있기 때문에 학습을 하게 되었습니다.
• 익숙해지면 괜찮지만 꽤나 복잡하다고 들은 Redux 학습을 이전에 React, Recoil 다뤄봤던 경험과 함께 잘 학습해보겠습니다.