반복문(Each 디렉티브)

each 디렉티브를 사용하면 배열이나 객체의 각 요소에 대해 반복할 수 있습니다. 반복문을 사용하기 위해 Riot.js 컴포넌트 내부에서 다음과 같이 사용할 수 있습니다:

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

위의 예제에서 items는 반복문을 수행할 배열이나 객체입니다. 각 요소는 item으로 참조됩니다. 이렇게 하면 items 배열 또는 객체의 각 요소를 순회하면서 <li> 요소를 생성합니다.

조건문(If 디렉티브)

if 디렉티브를 사용하면 조건문을 사용할 수 있습니다. 조건문을 사용하기 위해 Riot.js 컴포넌트 내부에서 다음과 같이 사용할 수 있습니다:

<my-component>
  <div if={showMessage}>
    <p>Show this message if showMessage is true.</p>
  </div>
</my-component>

위의 예제에서 showMessage는 true 또는 false 값을 가지는 변수입니다. showMessage 값이 true일 경우 <div> 요소와 그 내부의 <p> 요소가 렌더링됩니다.

Riot.js에서의 반복문과 조건문의 작성 방법에 대해 간략히 알아보았습니다. 이를 사용하여 동적인 UI를 쉽게 구현할 수 있습니다. 자세한 내용은 공식 문서를 참조하시거나, Riot.js의 예제 코드를 살펴보시기 바랍니다.

• 공식 문서: Riot.js docs
• 코드 예제: Riot.js examples