[javascript] Riot.js에서의 반복문 처리

04 Dec 2023

Riot.js는 간단하고 가벼운 웹 컴포넌트 라이브러리로, HTML, CSS, JavaScript를 조합하여 재사용 가능한 컴포넌트를 만들 수 있습니다. Riot.js에서는 데이터를 동적으로 표시하기 위해 반복문을 사용할 수 있습니다.

Riot.js에서 반복문을 사용하는 방법에는 두 가지가 있습니다. 하나는 iter 디렉티브를 사용하는 것이고, 다른 하나는 each 디렉티브를 사용하는 것입니다. 이 두 가지 방법을 살펴보겠습니다.

`iter` 디렉티브를 사용한 반복문

iter 디렉티브를 사용하면 배열이나 객체의 각 항목을 반복하여 처리할 수 있습니다. 예를 들어, 다음과 같은 배열을 가지고 있는 경우:

this.items = ['사과', '바나나', '오렌지'];

다음과 같이 iter 디렉티브를 사용하여 항목을 반복할 수 있습니다:

<ul>
  <li each={item in items}>{item}</li>
</ul>

위 코드에서 {item in items}는 iter 디렉티브를 사용하여 items 배열의 각 항목을 item 변수에 할당한다는 의미입니다.

each 디렉티브를 사용하면 배열 또는 객체의 각 항목을 반복하여 처리할 수 있습니다. 위에서 사용한 예제를 each 디렉티브를 사용하여 수정하면 다음과 같습니다:

<ul>
  <li each={item, index in items}>{index + 1}. {item}</li>
</ul>

위 코드에서 {item, index in items}는 each 디렉티브를 사용하여 items 배열의 각 항목을 item과 index 변수에 할당한다는 의미입니다. 이렇게 하면 항목의 인덱스와 함께 항목을 표시할 수 있습니다.