728x90
반응형
SMALL
안녕하세요.
https://blog.naver.com/sysysy0302 여니입니다 :)
import { createSlice } from "@reduxjs/toolkit";
const todoSlice = createSlice({
name : 'todoList',
initialState : { //;state초기값 넣어주기
todos : []
},
reducers : {
addTodos : (state, action) => { //;state는 항상 이 위치 그대로, action이 자동으로 두번째 매개변수로 됨.
console.log(action); // addTodos에 두번째 매개변수로
// view에서 호출한 inputValue가 넘어옴(payload의 값으로써)
const newTodo = {
todo : action.payload,
id : state.todos.length
}
// state에 newTodo를 추가한후 스토어에 값을 전달.
return {...state, todos : [...state.todos, newTodo]}; //...state로 원래 키값 유지해주면서 값을 넘겨줌
},
deleteTodos : (state, action) => {
const updatedTodos = state.todos.filter((todo) => todo.id !== action.payload); //; todo.id의 id는 TodoList.js의 'return <li key={item.id}>'의 키값인 id와 같다. //; payload는 키값, 즉 인덱스번호이다.
console.log(action); //; 콘솔창에서 각각 부여된 todo들의 인덱스 번호가 다르고, todo.id(todo내용 모두) 중에서 내가 누른(삭제할) todo값을 같지 않은 것은 남기고 같은 것은 지우겠다는 조건식인것이다.
return {...state, todos : updatedTodos}; //;전개연산자 사용 이유? state는 application당 1개이므로 다른 곳에도 state값이 존재할 수 있으므로 ...state로 표기
}
}
});
export const { addTodos, deleteTodos } = todoSlice.actions; //;reducers는 actions에 들어감. 즉 actions라고 할 수 있다.
export default todoSlice.reducer;
해당 포스팅은 코드의 흐름을 이해하는 것이 중요하므로 아래의 코드와 왔다갔다하며 주석처리한 부분을 잘 보아야한다.
newTodo 변수에 넣은 'todo : action.paload'로 새로운 todoList를 추가하면, 콘솔창에 다음과 같은 payload값이 순서대로 출력된다.
이번에는 todoList 를 위에서부터 아래로 하나씩 눌러 삭제하는데, 삭제할 때 각 todoList에 부여되어 있던 인덱스값인 payload가 콘솔창에 찍히며 사라진다.
따라서 deleteTodos의 ' const updatedTodos = state.todos.filter((todo) => todo.id !== action.payload); ' 에서 todo.id는 return문의 li의 key값으로 우리가 부여한 {item.id}인 곧 '인덱스 값'인 것이다.
그리고 action.payload는 todoList들 각각에 부여된 '인덱스 번호'인 것이다.
즉, 두 인덱스 값이 같은지 같지 않은지 비교한 후, 인덱스 값이 같다면 updateTodos변수에 담아주고
같다면 todoList에서 삭제하게 된다.
import {useState , useCallback} from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { addTodos, deleteTodos } from '../redux/todoSlice';
import { useRef } from 'react';
function TodoList(){
//useState를 활용하여 todolist를 state에 저장
const todos = useSelector((state) => state.todoList.todos);
const inputRef = useRef(null);
const dispatch = useDispatch();
// 투두리스트 추가기능
const handleAddTodo = useCallback(() => {
const inputValue = inputRef.current.value;
dispatch(addTodos(inputValue));
inputRef.current.value = "";
},[]);
// 완료한 투두리스트 삭제기능.
const handleDeleteTodo = (id) => {
dispatch(deleteTodos(id));
};
return(
<div>
<h2>Todo List</h2>
<input type="text" ref={inputRef}/>
<button onClick={handleAddTodo}>추가</button>
<ul>
{
todos.map( (item) => {
return <li key={item.id}>
{item.todo}
<a onClick={() => handleDeleteTodo(item.id)}>💕</a>
</li>
})
}
</ul>
</div>
)
}
export default TodoList;
728x90
반응형
LIST
'⋆ 。゜☁︎ 。⋆ 。゜☾゜。⋆⋆ 。゜☁︎ 。⋆ 。゜☾゜。⋆ > React' 카테고리의 다른 글
React - 리액트에서 쓰는 JSX 기본 문법 및 예시 (0) | 2023.08.06 |
---|---|
React - createSlice란? (+ 카운터 만들기) (0) | 2023.07.27 |
React - Redux란? (저장소 store, 액션 action, 리듀서 reducers, 미들웨어 middleware) + Clock 실시간 시계만들기 (0) | 2023.07.27 |
React - Router (useNavigate, useLocation, useSearchParam) (0) | 2023.07.26 |
React - HOC(High-Order-Component) (0) | 2023.07.26 |