> For the complete documentation index, see [llms.txt](https://freeseamew.gitbook.io/svelte/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://freeseamew.gitbook.io/svelte/5./todo-store-3-store.md).

# 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>