관리 메뉴

차근차근

[Redux] Pure Redux: To Do List 본문

대학교/FE

[Redux] Pure Redux: To Do List

SWKo 2020. 4. 1. 14:20

0. Vanilla ToDo

  • 간단한 ToDo에 Redux를 도입하는 과정을 잘 알기위해 먼저 다음과 같이 세팅한다.
  • index.html

  • index.js

 

  • 위와 같이 코드를 작성한 후 실행시켜보면 항목을 추가할 때마다 ADD_TODO라는 action이 일어남을 콘솔에서 확인할 수 있다.


1. State Mutation

  • Mutation은 변형이라는 뜻을 가지고 있다.
  • Mutation의 예시를 보겠다.
  • 아래코드에서는 friends를 변형한 것이다. 첫번째 friends에는 1명이 있었는데 두번째 friends에는 2명이 있다.

 

  • 새로운 state를 create하고 그 새로운 state를 return할 것이다.
  • mutation개념을 적용시킨 것은 다음과 같다. 이전 state를 가져온 후 text를 추가하여 return 하였다.

  • 결과는 다음과 같다.

  • state를 mutate하는 것이 아니다. 그저 새로운 object로 array를 만든 것이다.
  • 그렇다면 방금은 text를 추가했다면 DELETE는 어떻게 해야할까? 뒤에서 알아보자.

2. Delete To Do

  • 먼저 코드를 깔끔하게 고쳐보겠다. 
  • 고치기 전 코드는 다음과 같다.

  • 고친 후 코드는 다음과 같다.

  • 이제 화면에서도 추가되는 모습을 보여주기 위해 paintToDos함수를 추가하고 subscribe해준다.

  • 결과화면은 다음과 같다.

  • 이제 delete관련 함수들을 작성해보겠다. 그 전에 먼저 delete기능을 하는 버튼을 추가하겠다.
  • 또한 addToDo를 dispatchAddToDo로 바꾼 후 addToDo는 위로 올려 작성하겠다.
  • 주요 부분만 캡쳐해보겠다.
  • 먼저 화면에 보여지는 부분인 paintToDos함수이다.

  • 다음은 dispatchAddToDo함수와 dispatchDeleteToDo함수이다.

  • 다음은 dispatchAddToDo함수와 dispatchDeleteToDo함수에서 쓰이는 addTodo함수와 deleteToDo함수이다.

  • delete를 하기 전에 아래 내용에 대해 알아보자.
  • splice()함수를 보자. 이것은 array의 contents를 바꾼다. 그러나 나는 state와 array를 mutate하고 싶지 않다.
  • 나는 mutate가 아닌 새로운 array를 return하고 싶다. 이것을 위해서 filter라는 것을 살펴보자.
  • filter()은 test를 통과한 element들로 새로운 array를 만드는 것이다. 
  • filter()를 위 코드에 적용시켜보자.
  • 삭제할 todo의 id에 해당하지 않는 todo들을 filter시켜보겠다.

  • 이제 다음과 같이 잘 작동한다.

 

 

📌노마드코더의 '초보자를 위한 리덕스'수업을 듣고 쓴 글입니다.

'대학교 > FE' 카테고리의 다른 글

[React Hooks] Hooks (2)  (0) 2020.04.07
[React-Native] react-native init  (0) 2020.04.02
[Redux] Pure Redux: Counter  (0) 2020.03.30
[React Hooks] Hooks (1)  (0) 2020.03.21
[React-Native] (6) 플랫폼 API  (0) 2020.03.15
0 Comments
댓글쓰기 폼