Svelte | 스벨트(Svelte)로 TODO LIST 만들기 (2)

할일을 추가했으니 삭제/완료 처리를 해야한다..

 

1. 할일 삭제하기

이제 다 똑같다.. App.svelte에서 함수 생성하고, Todos컴포넌트로 전달 > Todos에서 TodoItem으로 전달 > 이벤트 연결

 

deleteTodo라는 함수를 생성해준다

id를 인자값으로 받아와서 filter를 이용해 걸러(?)준다

// src/App.svelte

<script>
// 생략
  let deleteTodo = (id) => {
      todoList = todoList.filter((todo) => todo.id !== id);
  }
</script>

<main>
  <div>
    <p>To Do List</p>
    <Input {todo} {addTodo} {handleKeyUp}/>
    <Todos {todoList} {deleteTodo} />	// Todos로 전달
  </div>
</main>

 

이제 Todos에서.. TodoItem으로 전달하면 된다..

// scr/components/Todos.svelte

<script>
  import TodoItem from "./TodoItem.svelte";
  export let todoList;
  export let deleteTodo;
</script>

<div>
  {#each todoList as todo }
    <TodoItem {todo} {deleteTodo} />	// TodoItem으로 전달
  {/each}
</div>

 

그리고 버튼 onClick이벤트에 연결

// src/components/TodoItem.svelte

<script>
  export let todo;
  export let deleteTodo;
</script>

<div>
  <input type="checkbox" checked={todo.completed} />
  <p>{todo.id}{todo.text}</p>
  <button on:click={() => deleteTodo(todo.id)}>x</button>
</div>

 

x 버튼을 누르면 삭제된다

 

2. 할일 완료하기

handleComplete라는 함수를 생성해주고 Todos로 넘기기...

// src/App.svelte

<script>
// 생략
	let handleComplete = (id) => {
		const index = todoList.findIndex((todo) => todo.id === id);
		todoList[index]["completed"] = !todoList[index]["completed"];
	}
</script>

<main>
	<div>
		<p>To Do List</p>
		<Input {todo} {addTodo} {handleKeyUp}/>
		<Todos {todoList} {deleteTodo} {handleComplete}/>
	</div>
</main>

 

Todos에서 다시 TodoItem으로!

// src/components/Todos.svelte

<script>
  import TodoItem from "./TodoItem.svelte";
  export let todoList;
  export let deleteTodo;
  export let handleComplete;
</script>

<div>
  {#each todoList as todo }
    <TodoItem {todo} {deleteTodo} {handleComplete}/>
  {/each}
</div>

 

TodoItem에서 checkbox onChange에 연결

// src/components/TodoItem.svelte

<script>
  export let todo;
  export let deleteTodo;
  export let handleComplete;
</script>

<div>
  <input type="checkbox" checked={todo.completed} on:change={()=>handleComplete(todo.id)}/>
  <p>{todo.id}{todo.text}</p>
  <button on:click={() => deleteTodo(todo.id)}>x</button>
</div>

 

끝!

대충 완성이라는 뜻