초보자를 위한 리덕스 101 : 삭제 기능을 추가하기

오늘은 삭제기능을 추가하는 방법을 공부하려 한다.

 

먼저 우리는 저번에 추가한 추가하는 것을 function으로 분리를 할 수 있다.

// src > index.js
// 중략

const addToDo = (text) => {
  store.dispatch({ type: ADD_TODO, text });
};

const onSubmit = (e) => {
  e.preventDefault();
  const toDo = input.value;
  input.value = "";
  addToDo();
};

// 중략

store.dispatch를 원래는 onSubmit에 넣었는데 이 문구가 더 많은 일을 할 경우에는 분리를 하는 것이 좋다. 그렇기 때문에 그런 편리성을 위해서 function addToDo를 만들어서 onSubmit에서 호출이 되도록 설정을 하였다.

 

그리고 우리는 이 콘솔에서만 보이는 값들은 html에 넣어야 한다.

// src > index.js
// 중략


const paintToDos = () => {
  const toDos = store.getState();
  ul.innerHTML = "";
  toDos.forEach((toDo) => {
    const li = document.createElement("li");
    li.id = toDo.id;
    li.innerText = toDo.text;
    ul.appendChild(li);
  });
};
store.subscribe(paintToDos);

const addToDo = (text) => {
  store.dispatch({ type: ADD_TODO, text });
};

const onSubmit = (e) => {
  e.preventDefault();
  const toDo = input.value;
  input.value = "";
  addToDo(toDo);
};

// 중략

이렇게 값을 넣으면 우리는 콘솔 창에서 배열이 추가되는 모습을 확인할 수 있다.

결과 확인 gif

위와 같은 모습을 확인할 수 있다.

 

그리고 만약 순서가 최근에 올린 ToDo로 정렬을 하고 싶다면 다음과 같은 순서로 바꾸면 된다.

// src > index.js
// 중략

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

// 중략

...state는 앞서 말했듯이 기존의 object들을 가져오는 것이고, 그 앞에는 현재 내가 작성하여 저장할 값들을 의미한다. 따라서 현재 내가 저장하려는 것을 재일 앞에 배열이 되도록 설정을 할 수 있다.

 

그리고 이제 Todo를 지우는 구현을 해보려고 한다.

// src > index.js
// 중략

const paintToDos = () => {
  const toDos = store.getState();
  ul.innerHTML = "";
  toDos.forEach((toDo) => {
    const li = document.createElement("li");
    const btn = document.createElement("button");
    btn.innerText = "DEL";
    li.id = toDo.id;
    li.innerText = toDo.text;
    li.appendChild(btn);
    ul.appendChild(li);
  });
};

// 중략

먼저, 생성할 때 li뿐만 아니라 delete 버튼을 새로 만들어 준다. 그럼 아래 이미지와 같은 화면이 나올 것이다.

Add delete button

 

 

그리고 삭제 구현을 하기 위해서 javascript에서 splice 함수를 이용하여 배열의 값을 제거하였는데, 변환을 하지 않기 위해서는 우리는 filter이라는 함수로 대체하여 사용을 할 것이다.

// src > index.js
// 중략

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

// 중략

여기서 기존의 값 state에서 filter를 이용하여 toDo.id와 현재 내가 클릭한 id값이 같지 않는 것들만 필터를 해서 보여준다는 의미를 내포하고 있다. 즉, 클릭한 값을 id로 구분하여 삭제를 하는 것을 의미한다. 그럼 아래 GIF처럼 삭제가 되는 모습을 확인할 수 있다.

삭제가 되가는 delete ToDos

 

 

오늘은 삭제하는 ToDo를 제작해보았다.

처음에 ToDo를 시작하였을 때는 이해 못한 부분이 있었는데...

다시 한번 해보니 이해가 가지 않는 부분이 조금씩 보여 기분이 좋은 한주가 되었다.