React - TodoList 추가, 삭제하기

안녕하세요.
https://blog.naver.com/sysysy0302 여니입니다 :)

yeonee 블로그 : 네이버 블로그

 

 

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;