[Svelte] {#each} 사용할 때 유의점

안녕하세요 Dibrary입니다.

아직 제가 javascript에 익숙하지 않아서 그런지는 모르겠으나, svelte에서 each를 쓰려고 했다가 꽤 시간을 사용한 경험이 있었습니다. 

 

svelte에서 정수값을 쓰려고 하면 아래와 같은 에러가 나타납니다. (정수값은 DB에서 가져왔습니다.)

코드는 아래와 같이 단순히 컴포넌트 묶음을 bottleCount라는 변수 갯수 만큼 반복하고 싶었던 것이죠.

 

근데 제가 Javascript를 공부했을 때 기억나는 반복문은 for문인데, svelte에서 사용하는 반복문은 for문이 아니라 each이고, 흔히 아는 ( ; ; ) 꼴이 아니어서 당황했죠.

 

마침 Stackoverflow에 관련 글이 올라왔는데, Array( )를 사용해서 배열로 만들어 버리면 그 자체로 iterable한 객체가 되어 버림으로 사용할 수 있다는 것을 찾았습니다.

그래서 아주 간단히 코드를 수정 해 보았고, 화면이 정상으로 나타났습니다.

 

차후에 또 이런 구현을 할 때 까먹지 않고자 기록해 보았습니다.

DB에 연결된 '갯수' 만큼 컴포넌트 요소를 보여주고자 한다면 간단하게 구현이 가능하네요.