[DevNote] 0129

오늘 내가 공부 한 것.

• 처음으로 Redux를 공부했다. React를 공부한 이후 때문인지 굉장히 어려울 것만 같으 느낌으로
  시작했지만, 실상은 그렇게 어렵지는 않았다. 노마더코드를 보면서 공부했는데, 쉽게 이해할 수 있었다.

오늘 배운 내용 정리.

import { createStore } from "redux";
//You can make store by importing createStore from redux.
const add = document.getElementById("add");
const minus = document.getElementById("minus");
const number = document.querySelector("span");

number.innerText = 0;

// It make you more safe to not make any typo when we write down in string.
const ADD = "ADD";
const MINUS = "MINUS";

const countModifier = (count = 0, action) => {
  if (action.type === ADD) {
    return count + 1;
  } else if (action.type === MINUS) {
    return count - 1;
  } else {
    return count;
  }
};

// Same as upper code. it looks more compact and beautiful.
// switch (action.type) {
//   case "ADD":
//     return count + 1;
//   case "MINUS":
//     return count - 1;
//   default:
//     return count;
// }

const countStore = createStore(countModifier);

const onChange = () => {
  number.innerText = countStore.getState();
};
countStore.subscribe(onChange);

//action must be type not name or anything, you can't change the name.
add.addEventListener("click", () => countStore.dispatch({ type: ADD }));
minus.addEventListener("click", () => countStore.dispatch({ type: MINUS }));

// 위의 내용과 같은 내용의 함수임.
// const handleAdd = () => {
//   countStore.dispatch({type : "ADD"})
// }

// const handleMinus = () => {
//   countStore.dispatch({type : "MINUS"})
// }

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

1. createStore를 통해 store를 만들 수 있음.
2. string을 변수로 저장해 놓음으로서 오타를 방지 할 수 있음.
3. action의 이름은 꼭 type이 꼭 있어야 함. 다른 이름 안됨.

느낀점

• Redux가 그렇게 어렵지는 않았지만, 이걸 지나서 firebase를 들어야 한다는 점이 걱정이 되었다.

오늘의 한줄

조금 늦거나 다른 사람들이 푸는 문제를 풀지 못하더라도 조바심 갖지 말고 천천히 꼼꼼히 해보자!