TIL 32. React - redux로 To Do List 만들기

리액트 숙련 과정의 과제가 있다.
입문 과정에서 만든 To Do List에 redux를 적용시켜서 다시 만드는 과제다.
새로 적용시킨 부분만 포스팅 했다.
새로고침 시, 데이터가 초기화 되는 것이 싫어서 추가적으로 persist를 사용했다.

redux store 부분 (feat. persist)

redux의 저장소인 store를 createStore로 만들고, store에 데이터를 담아줄 모듈들을 소괄호 안에 넣는다.

그 모듈들은 rootReducer라는 변수의 combineReducer를 사용해서 하나로 모아지고, rootReducer라는 변수가 createStore의 소괄호 안에 들어간다.

근데, state가 초기화 되는 경우가 있으므로, persist의 persistReducer를 통해 특정 모듈(함수)로 store에 저장된 데이터는 초기화되지 않게 한다.

Provider 설정 부분 (feat. persist)

App 컴포넌트 주변을 PersistGate로 감싸서, App이 persist의 적용을 받도록 했고,
그걸 다시 Provider로 감싸서 redux를 사용할 수 있도록 해줬다.

모듈 부분

아래는 전체적인 코드다.

---

위 코드를 나눠서 설명하면 다음과 같다.

이 부분은 휴먼 에러를 방지하기 위해 변수화 시킨 것이다.

---

이 부분은 action 부분인데, 로직관련 파일에서 dispatch 통해 데이터(payload)를 보내면
해당 action에 맞는 reducer 속 case문이 실행된다. (dispatch -> action -> reducer)

---

redux 저장소다. redux 사용 전에는 useState를 사용해서 저장을 했기 때문에
하위 컴포넌트에서 상위 컴포넌트로 데이터를 보낼 수 없었지만,
redux 저장소에 데이터를 저장하면 모든 컴포넌트에서 데이터를 사용할 수 있다.

---

위 리듀서가 configStore.js에 나온 리듀서다.

• ADD_TODO

전개연산자(...)로 state인 initialState의 데이터를 다 불러오고,
state에 state의 todos를 전개연산자로 모두 가져온 후,
ADD_TODO를 달고 있는 action의 payload 데이터를 넣는다.

ADD_TODO를 달고 있는 action의 함수는, 로직 관련 js파일에서 실행돼서
리듀서의 케이스와 일치하는 리턴문을 실행한다.

• DELETE_TODO

데이터를 전개연산자로 가져오고 filter를 사용해서,
payload로 받은 id와 todos의 id와 같지 않은 데이터를 todos에 반환한다.

• EDIT_TODO

전개연산자를 사용하며, todos를 map으로 순회해서 순회하는 todo의 id와 payload의 id와 같으면
todos의 title을 payload로 받은 title로 덮어씌운다.

• CONFIRM_TODO

전개연산자를 사용하며, edit과 똑같이 map으로 순회하면서 id가 같으면,
todos의 idDone 값을 부정으로 만들어준다.(true의 부정 = false, false의 부정 = true)

store로 데이터를 보내는 dispatch

아래는 Form 부분이며, return 부분과 import 부분은 넣지 않았다.

가장 위에 있는 useState 두 개는, title과 body를 input에 입력할 때 onChange로 감지해서 state에 담는다.

그리고 버튼을 눌러서 submit 이벤트를 발생시키면 기본 이벤트(새로고침)를 막고,
title과 body의 state 값이 비어있다면 빈 return을 주는 것으로 다음 코드가 실행되지 않게 하고,
빈 값이 아니라면 dispatch로, 모듈의 addTodo 함수라는 action에 소괄호 안의 데이터를 담아서 보낸다.
(addTodo 함수는, type으로 ADD_TODO를 달고 있으니, reducer는 ADD_TODO의 return을 실행한다.)
그리고 setTitle과 setBody로 state를 빈 값으로 만들어준다.

---

editing이란 state는 토글버튼을 사용할 때 쓰는 state이므로 redux를 사용할 때 쓰진 않는다.
editTitle과 editBody는 input태그에 수정할 때 onChange로 감지해서 state에 담는다.
(12번, 15번 줄에 있는 함수가 onChange의 괄호 안에 들어가는 함수)

버튼을 눌러서 confirmTodo를 실행시키면, dispatch에 confirmTodo라는 action에 payload 데이터를 보낸다.
id를 보내는 이유는 initialState의 todos 속 id와 일치하는, todos의 isDone을 바꿔야 하기 때문이다.

deleteToDo도 confirmTodo와 마찬가지다.

25번 onSubmit은 수정 함수다.
id에 맞는 state todos의 데이터 속 title, body를 바꾼다.

---

Form과 List를 따로 만든 이유.

하나의 파일로 todo가 작성된다면,
모든 todo가 js코드를 공유할테니, 한 todo의 버튼을 누르게 되면 모든 todo의 버튼을 누르게 된다.
물론 어떤 방식으로든 하나의 버튼만 누를 수 있게 만들 수 있겠지만,
List만 빼서 map으로 여러번 찍어내면, 버튼 같은 상호 작용을 약간은 편하게 만들 수 있다.