# {#each ...}

### 2) 반복 블럭

논리 블럭 만큼이나 많이 사용되는 것이 반복문일 것입니다.

이를 지원하기 위해 {#each}라는 태그를 사용합니다.

```
<script>
	let todos = [
		{
		    id:0,
		    content: '첫 번째 할일',
		    done: false
		  },
		  {
		    id:1,
		    content: '두 번째 할일',
		    done: false
		  },
		  {
		    id:2,
		    content: '세 번째 할일',
		    done: true
		  },
		  {
		    id:3,
		    content: '네 번째 할일',
		    done: false
		  }
	]
<script>

// 기본
<ul>
	{#each todos as todo}
		<li>
			<span>{todo.id}</span>
			<span>{todo.content}</span>
		</li>
	{/each}
</ul>

```

다음과 같이 사용할 수 도 있고, index를 넣을 수 도 있습니다.

```
{#each todos as {id, content, done}, i} } // 여기서 i는 0부터 시작하는 index 입니다. 

// 응용
<ul>
	{#each todos as {id, content, done}, index }
		<li>
			<span>{index + 1}</span>
			<span>{content}</span>
			<span>{done}</span>
		</li>
	{/each}
</ul>

```

[\[만들면서 배우는 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="https://2456181503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFoRG7N_kopXKHrUIam%2F-MGqndftNeXvP53tyaae%2F-MGqwZuQK1aEaE5Bp21i%2F%E1%84%86%E1%85%A1%E1%86%AB%E1%84%83%E1%85%B3%E1%86%AF%E1%84%86%E1%85%A7%E1%86%AB%E1%84%89%E1%85%A5%20%E1%84%87%E1%85%A2%E1%84%8B%E1%85%AE%E1%84%82%E1%85%B3%E1%86%AB%20svelte%20small.png?alt=media&#x26;token=e769cba7-bb5e-40a9-89c6-2879e60242bf" alt="만들면서 배우는 svelte"></div>