# todo store 적용 3 :  컴포넌트에 store 연동

* TodoList

```
<script>
import TodoItem from './TodoItem.svelte'
import { fetchTodos } from '../store'
import { fade, fly } from 'svelte/transition'
import { flip } from 'svelte/animate'
</script>

<div class="main">
  <ul>
    {#each $fetchTodos as todo, index(todo.id)}
      <li
        in:fade
        out:fade="{{duration: 100}}"
        animate:flip="{{duration: 1000}}"
        >      
        <TodoItem {todo} />
      </li>
    {/each}
  </ul>
</div>
```

* TodoItem

```
<script>
import { todos } from '../store'

export let todo

const handleCheckTodo = () => todos.checkTodo(todo.id)
const handleChangeTodoEditMode = () => todos.changeTodoEditMode(todo.id)
const handleEditTodo = () => {
  todos.editTodo(todo)
  todos.closeTodoEditMode()
}

const handleRemoveTodo = () => todos.removeTodo(todo.id)

</script>

<input type="checkbox" bind:checked={todo.done} on:click={handleCheckTodo} />
{#if $todos.editMode === todo.id }
  <input type="text" bind:value={todo.content} on:focusout={handleEditTodo} >
{:else}
  <span on:dblclick={handleChangeTodoEditMode}>{todo.content}</span>
{/if}
<a href="#null" on:click={handleRemoveTodo} >X</a>
```

* TodoHeader.svelte

```
<script>
import { todoForm, todos } from '../store'

const handleTodoAdd = (e) => {
  if(e.keyCode === 13) {
    todos.addTodo($todoForm)
  }
}
</script>

<header>
  <div class="wrap">
    <h1>SVELTE TODO</h1>
    <input type="text" bind:value={$todoForm} on:keyup={handleTodoAdd} >  
  </div>
</header>
```

* TodoInfos.svlete

```
<script>
import { todos, countTodo } from '../store'
import Constant from '../constant'

const handleFetchTodoALL = () => todos.changeTodoView(Constant.ALL)
const handleFetchTodoActive = () => todos.changeTodoView(Constant.ACTIVE)
const handleFetchTodoDone = () => todos.changeTodoView(Constant.DONE)

</script>

<div class="info">
  <div class="wrap">
    <span>COUNT: {$countTodo}</span>
    <div>
      <button class:selected={$todos.viewMode === Constant.ALL} class="btn" on:click={handleFetchTodoALL} >ALL</button>
      <button class:selected={$todos.viewMode === Constant.ACTIVE} class="btn" on:click={handleFetchTodoActive} >ACTIVE</button>
      <button class:selected={$todos.viewMode === Constant.DONE} class="btn" on:click={handleFetchTodoDone} >DONE</button>
    </div>  
  </div>
</div>

<style>
.selected {
  border-bottom: 2px solid #005EFF;
}
</style>
```

[\[만들면서 배우는 Svelte\]](https://www.inflearn.com/course/%EB%A7%8C%EB%93%A4%EB%A9%B4%EC%84%9C-%EB%B0%B0%EC%9A%B0%EB%8A%94-%EC%8A%A4%EB%B2%A8%ED%8A%B8)

<div align="left"><img src="/files/-MGqwZuQK1aEaE5Bp21i" alt="만들면서 배우는 svelte"></div>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://freeseamew.gitbook.io/svelte/5./todo-store-3-store.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.