JSON 데이터로 동적 UI 항목 생성하기 (JavaScript 실습)

웹 개발을 하다 보면, 고정된 HTML 요소가 아니라 외부 데이터(JSON 파일 등) 를 불러와서 화면에 표시해야 하는 경우가 많습니다.
예를 들어, 추첨 이벤트나 랭킹 보드처럼 상품 목록이나 참여자 리스트를 서버에서 내려주는 JSON 데이터로 관리하고, 이를 동적으로 렌더링할 수 있습니다.

이번 글에서는 JSON 데이터를 fetch로 불러와 동적으로 항목을 생성하는 방법을 간단한 예시로 살펴보겠습니다.

---

1. JSON 예시 데이터 준비

먼저 예시용 JSON 파일 두 개를 만들어둡니다.

{
  "products": {
    "1": ["프리미엄 상품 A", "스페셜 패키지 B"],
    "2": ["실버 상품 1", "실버 상품 2", "실버 상품 3"],
    "3": ["스탠다드 상품 A", "스탠다드 상품 B", "스탠다드 상품 C"]
  }
}

{
  "nicknames": [
    "참여자1",
    "참여자2",
    "참여자3",
    "참여자4",
    "참여자5"
  ]
}

---

2. 기본 HTML 뼈대 만들기

HTML에는 데이터를 담을 컨테이너 요소만 준비해둡니다.
실제 항목들은 JavaScript에서 생성합니다.

<div class="product-list">
  <h2>상품 목록</h2>
  <div id="productContainer"></div>
</div>

<div class="nickname-list">
  <h2>참여자 목록</h2>
  <div id="nicknameContainer"></div>
</div>

---

3. JSON 데이터 불러오기 (fetch)

JavaScript에서 fetch API를 사용해 JSON을 불러옵니다.
비동기로 처리되므로 async/await를 활용하는 것이 깔끔합니다.

// 상품 데이터 로드
async function loadProducts() {
  const response = await fetch('/data/products.json');
  return await response.json();
}

// 닉네임 데이터 로드
async function loadNicknames() {
  const response = await fetch('/data/nicknames.json');
  return await response.json();
}

---

4. 동적으로 항목 생성하기

이제 JSON 데이터 기반으로 DOM 요소를 생성해봅시다.

상품 목록 출력

async function renderProducts() {
  const data = await loadProducts();
  const container = document.getElementById('productContainer');
  container.innerHTML = '';

  // 랭킹별 상품 출력
  Object.keys(data.products).forEach(rank => {
    data.products[rank].forEach(name => {
      const div = document.createElement('div');
      div.className = 'product-item';
      div.innerHTML = `<strong>${rank}등</strong> - ${name}`;
      container.appendChild(div);
    });
  });
}

닉네임 목록 출력

async function renderNicknames() {
  const data = await loadNicknames();
  const container = document.getElementById('nicknameContainer');
  container.innerHTML = '';

  data.nicknames.forEach((nickname, index) => {
    const div = document.createElement('div');
    div.className = 'nickname-item';
    div.innerHTML = `<span>${index + 1}번</span> ${nickname}`;
    container.appendChild(div);
  });
}

---

5. 실행하기

페이지 로드 시 자동으로 실행되도록 window.onload에 연결합니다.

window.onload = () => {
  renderProducts();
  renderNicknames();
};

---

6. 결과 화면

위 코드를 실행하면 JSON 데이터에 따라 다음과 같은 결과가 나타납니다.

• 상품 목록: JSON에 정의된 상품명이 순서대로 출력
• 참여자 목록: 닉네임이 번호와 함께 출력
  즉, 데이터를 바꾸면 화면도 자동으로 업데이트되는 구조가 완성됩니다 🎉

---

마무리

이 방법을 활용하면

• 이벤트 참여자 명단
• 랭킹 보드
• 상품 리스트
• 댓글 목록
  등 다양한 UI를 JSON 데이터로 관리하면서 동적으로 생성할 수 있습니다.

특히 관리자가 데이터를 직접 수정하거나 서버에서 내려주는 경우에도 HTML을 매번 바꿀 필요 없이 JSON만 수정하면 되는 장점이 있습니다.