[Svelte 시리즈 4편] `{#if}`와 `{#each}`로 화면을 조립해 보자

데이터를 받았으면 상태별로 나누어 보여줘야 합니다. 이번 글은 조건문과 반복문을 이용해 교내 서비스처럼 친근한 화면을 만드는 과정을 안내합니다.

이번 글에서 새로 나오는 용어

1. 조건부 렌더링: 특정 상태일 때만 요소를 보여 주는 기법으로 {#if} 블록으로 구현합니다.
2. 리스트 렌더링: 배열을 반복해 카드나 항목을 그리는 방식으로 {#each} 블록이 담당합니다.
3. key: {#each item as thing (thing.id)} 형태로 쓰는 고유 값으로, 항목 순서가 바뀌어도 화면이 안정적으로 갱신되게 합니다.
4. 빈 상태(UI empty state): 데이터가 없을 때 안내 문구나 행동 버튼을 보여 주는 영역으로 사용자 혼란을 줄입니다.

개념

조건부 렌더링은 특정 상태일 때만 UI를 보여 주는 기법입니다. 상태 값에 맞는 메시지만 남기면 학생들이 혼란을 겪지 않습니다. 리스트 렌더링은 배열 데이터를 반복해서 그리는 패턴입니다. {#each} 블록 안에서 key를 지정하면 항목이 바뀔 때 화면 깜박임을 줄일 수 있습니다. 빈 상태, 로딩 상태, 실제 데이터 상태를 차례대로 정의하는 습관은 페이지를 안정적으로 만듭니다.

코드

통학 버스 도착 위젯을 예제로 사용합니다. 로딩 문장, 빈 안내 문장, 도착 목록을 하나의 섹션 안에서 분기합니다.

<script>
  export let arrivals = [];
  export let loading = true;
</script>

<section>
  {#if loading}
    <p>정류장 정보를 불러오는 중...</p>
  {:else if arrivals.length === 0}
    <p>잠시 후 다시 확인하세요.</p>
  {:else}
    <ul>
      {#each arrivals as bus (bus.id)}
        <li>
          <strong>{bus.route}</strong> - {bus.remain}분 뒤 도착
        </li>
      {/each}
    </ul>
  {/if}
</section>

arrivals 배열이 비면 안내 문장을 보여 주고, 값이 있으면 반복해서 렌더링합니다. 각 항목은 bus.id를 key로 사용해 순서를 잃지 않습니다. 이 패턴만 기억하면 급식 알레르기표, 행사 참가자 명단, 공지 리스트까지 손쉽게 구성 가능합니다.

왜 중요한가

실제 서비스는 항상 여러 상태를 왔다 갔다 합니다. 데이터가 늦게 오면 로딩 메시지가 필요하고, 값이 없으면 다시 시도하라는 안내가 필요합니다. 학생용 대시보드에서도 같은 규칙이 적용됩니다. {#if}와 {#each}의 조합을 몸에 익히면 차후 서버 데이터를 연결할 때도 조건 구조를 바로 잡을 수 있어 디버깅 시간이 줄어듭니다.

실습

• 따라 하기: 버스 위젯 예제를 그대로 작성하고 loading 값을 바꿔 세 상태를 체크한다.
• 확장하기: 빈 상태일 때 안내 버튼을 추가하거나 arrivals 항목에 색상을 붙여 본다.
• 디버깅: 메시지가 겹치면 {#if}의 닫힘 태그 위치와 arrivals.length 계산을 확인한다.
• 완료 기준: 배열 데이터를 바꿔도 로딩, 빈, 목록 상태가 순서대로 전환된다.

마무리

조건 블록과 리스트 블록을 합치면 상태별 UI 흐름이 자연스럽게 이어집니다. 다음 편에서는 bind: 문법으로 입력 값이 곧바로 상태에 연결되는 경험을 다룹니다.