개발자를 향해...

[초보자를 위한 리덕스 101] #2.0 Vanilla ToDo ~ #2.1 State Mutation 본문

웹 자바스크립트 공부/ReactJS + node.js

[초보자를 위한 리덕스 101] #2.0 Vanilla ToDo ~ #2.1 State Mutation

eugeneHwang1124 2021. 3. 9. 13:36
728x90
반응형

본 글은 노마드코더 님의 [초보자를 위한 리덕스 101]을 수강하며 작성하였습니다.

 

#2.0 Vanilla ToDo

 

To do list를 만들어보자 우선 html의 body부분을 다음과 같이 바꾸어준다.

  <body>
    <h1>To Dos</h1>
    <form>
      <input type="text" placeholder="Write to do" />
      <button>Add</button>
    </form>
    <ul></ul>
  </body>

이제 js 부분을 바꾸어주자.

form, input, ul 을 연결하고 reder에 배열과 action을 넣어주자. 그리고 reducer로 createStore을 해준다.

그리고 버튼을 누르면 이벤트를 발생시켜 입력창의 값을 toDo에 추가하는 onSubmit 함수를 만들어보자.

 

import {createStore} from "redux";

const form = document.querySelector("form");
const input = document.querySelector("input");
const ul = document.querySelector("ul");

const ADD_TODO = "ADD_TODO";
const DELETE_TODO = "DELETE_TODO";

const reducer = (state = [], action) => {
  console.log(action);
  switch(action.type){
    case ADD_TODO:
      return [];
    case DELETE_TODO:
      return [];
    default:
      return state;
  }
};
const store = createStore(reducer);

const onSubmit = e => {
  e.preventDefault();
  const toDo = input.value;
  input.value = "";
  store.dispatch({ type: ADD_TODO, text: toDo });
};

form.addEventListener("submit", onSubmit);

toDo는 input의 텍스트 값에서 할당되는 것이다.

 

#2.1 State Mutation

 

공식 문서를 살펴보면 state는 읽기만 가능하고 Single source of truth이다. 이것은 값 변경을 시도해서는 안된다는 것을 의미한다. State를 바꾸는 방법은 action을 사용하는 것이다. 따라서 값을 배열에 추가하는 것이 아니라 새로운 배열을 선언하고 그 새로운 state를 리턴해야한다. 

const reducer = (state = [], action) => {
  console.log(action);
  switch(action.type){
    case ADD_TODO:
      return [...state, {text:action.text}];
    case DELETE_TODO:
      return [];
    default:
      return state;
  }
};

...state는 배열 대신에 contents를 넣어야한다는 의미이다. 즉 이전 state어레이에 {text:action.text}를 추가해서 새로운 어레이를 만들었다는 것이다. 이제 지우는 것을 해보자.

반응형

'웹 자바스크립트 공부 > ReactJS + node.js' 카테고리의 다른 글

[초보자를 위한 리덕스 101] #3.2 mapStateToProps ~ #3.3 mapDispatchToProps  (0) 2021.03.09
[초보자를 위한 리덕스 101] #2.2 Delete To Do ~ #2.4 Conclusions  (0) 2021.03.09
[초보자를 위한 리덕스 101] #1.2 Actions ~#1.4 Recap Refactor  (0) 2021.03.09
[초보자를 위한 리덕스 101] #0.1 🚨 Read this First 🚨 ~ #1.1 Store and Reducer  (0) 2021.03.05
[React Native로 날씨앱 만들기] #2.3 Background Gradient ~ #2.5 Conclusions  (0) 2021.02.27
'웹 자바스크립트 공부/ReactJS + node.js' Related Articles more