이전에 Vanila Javascript를 이용해 만들어 보았던 TODO List를 Redux를 사용해서 구현.
- State Mutation (state 변형) 금지 => State에 직접 접근하여 변형하는 것이 아니라 새로운 State를 Return
- input에 사용자가 입력한 값을 reducer 함수에 전달 => "text" 키 값으로 store.dispatch()를 통해 전달
- 기존의 TODO 배열에 직접 값을 넣는 것이 아닌 기존의 Content를 갖는 새로운 배열을 생성해서 Return
- ...state : state 배열이 가지고 있는 기존 Content (ES6)
- 삭제를 위해서 TODO를 추가할 때 각각의 todo에 id를 Date.now()로 추가
- array.filter() : filter(element => 조건) - 조건의 True인 값들만 남고 나머지는 삭제된 새로운 배열을 return 해줌
=> TODO를 추가할 때와 마찬가지로 배열에 직접 접근하여 삭제하는 것이 아닌 새로운 배열을 생성해서 Return하기 위해 사용
[소스코드]
[노마드코더] Redux 101 - 마지막 (0) | 2021.01.13 |
---|---|
[노마드코더] Redux 101 - 세번째 (0) | 2021.01.13 |
[노마드코더] Redux 101 - 첫번째 (0) | 2021.01.13 |