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

투두앱 질리지만.. 후딱 만들 수 있으니까 해보기로 합니다..

 

1. 컴포넌트 생성

src폴더 하위에 compoents폴더를 생성한 뒤, Todos.svelte / TodoItem.svelte / Input.svelte 세 파일 생성

📌Todos : 투두 아이템을 감쌀 컴포넌트

📌TodoItem : 할일 하나하나.. 나중에 for each문이 돌면서 촤라락 나올 것..

📌Input : 할일을 입력하는 컴포넌트

 

코드보기👇

💥Todos

<script>
  import TodoItem from "./TodoItem.svelte";
</script>

<div>
    <TodoItem />
</div>

 

💥TodoItem

<div>
  <input type="checkbox" />
  <p></p>
  <button>x</button>
</div>

 

💥Input

<div>
  <input type="text" placeholder="할일을 입력하쇼" />
  <button>ADD</button>
</div>

 

그리고 App.svelte에서 불러옵니다..

// src/App.svelte

<script>
	import Input from "./components/Input.svelte";
	import Todos from "./components/Todos.svelte";
</script>

<main>
	<div>
		<p>To Do List</p>
		<Input />
		<Todos />
	</div>
</main>

 

짜라란

 

2. Todo List 뿌려주기

App.svelte에서 todoList배열을 생성한 뒤 Todos컴포넌트로 props를 넘겨줍니다.

// src/App.svelte

<script>
	import Input from "./components/Input.svelte";
	import Todos from "./components/Todos.svelte";

	let todoList = [
    {
      id: 1,
      text: "할일이 산더미다",
      completed: false
    },
    {
      id: 2,
      text: "할일이 없나?",
      completed: false
    },
    {
      id: 3,
      text: "할일을 미루고싶다",
      completed: true
    }
	];
	
</script>

<main>
	<div>
		<p>To Do List</p>
		<Input />
		<Todos {todoList} />
	</div>
</main>

 

그리고 Todos에서 props를 받아와 each문을 돌려주면..

// src/components/Todos.svelte

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

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

 

할일을 미루고 싶다

 

3. 할일 추가하기 ㅠ

App.svelte에서 모든것을 다 선언해서... props로 넘겨주고 있습니다... 

✔️todo는 Input컴포넌트로 넘겨서 input태그에서 입력된 value가 담길 변수

✔️addTodo는 ADD버튼을 누르거나, input태그에서 엔터키를 눌렀을 때 실행될 함수로 todoList에 할일을 추가함!

✔️handleKeyUp은 event를 인자값으로 받아 todo값을 업데이트하고, 엔터키가 눌리면 addTodo함수를 실행

<script>
	import Input from "./components/Input.svelte";
	import Todos from "./components/Todos.svelte";

	let todo = "";	// input에 입력될 값!
	let todoList = [
      {
        id: 1,
        text: "할일이 산더미다",
        completed: false
      },
      {
        id: 2,
        text: "할일이 없나?",
        completed: false
      },
      {
        id: 3,
        text: "할일을 미루고싶다",
        completed: true
      }
	];
	
	let lastId = todoList[todoList.length-1]['id'];

	// 할일을 추가하는 함수
	let addTodo = () => {
      if(todo) {
        let newTodo = {
          id: ++lastId,
          text: todo,
          completed: false
        }

        todoList[todoList.length] = newTodo;
        todo = "";
      }
	}
	
    // todo값을 업데이트 하면서, 엔터키를 누르면 할일이 추가되도록 하는 함수
	let handleKeyUp = e => {
		todo = e.target.value;
		if(e.keyCode === 13) {
			addTodo();
		}
	}
</script>

 

그리고 props로 모두 전달!

// src/App.svelte

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

 

Input.svelte에서 props를 받고.. 이벤트를 연결한다

✔️bind:value={todo}로 input value를 설정 handleKeyUp에서 업데이트된 todo값이 bind:value를 통해 계속 반영됨

✔️on: 을 통해 DOM 이벤트를 실행

// src/components/Input.svelte

<script>
  export let todo;
  export let addTodo;
  export let handleKeyUp;
</script>

<div>
  <input type="text" placeholder="할일을 입력하쇼" bind:value={todo} on:keyup={e => handleKeyUp(e)}/>
  <button on:click={addTodo}>ADD</button>
</div>

이제 엔터키 혹은 ADD버튼을 클릭하면 할일이 추가된다!

된다...!