JavaScript 객체를 HTML 요소로 표시하는 방법

이 튜토리얼에서는 JavaScript 객체 배열을 웹 페이지에서 HTML 요소 목록으로 표시하는 방법을 단계별로 배워보겠습니다.

여러 개의 데이터가 담긴 JavaScript 객체 배열을 브라우저 화면에 목록 형태로 출력해야 하는 경우가 자주 있습니다. 이번 예제에서는 네 가지 운동 정보를 담은 객체 배열을 HTML 리스트로 변환해 보겠습니다.

JavaScript 객체 리터럴

먼저 예제로 사용할 객체 리터럴 배열입니다. 네 개의 운동 객체로 구성되어 있습니다.

let exerciseObjects = [
  {
    name: "Deadlift", // 데드리프트
  },
  {
    name: "Push-up", // 푸시업
  },
  {
    name: "Pull-up", // 풀업
  },
  {
    name: "Squat", // 스쿼트
  },
];

이 객체들을 브라우저에서 다음과 같은 순서 없는 목록으로 표시하는 것이 목표입니다.

Deadlift
Pull-up
Push-up
Squat

크롬 개발자 도구(DevTools)로 위 목록을 검사해 보면 HTML 마크업은 다음과 같습니다.

<ul>
  <li>Deadlift</li>
  <li>Pull-up</li>
  <li>Push-up</li>
  <li>Squat</li>
</ul>

객체 배열을 HTML 요소로 표시하는 4단계

전체 과정은 다음 네 단계로 진행됩니다.

HTML로 빈 <ul> 요소를 생성합니다.
for...of 반복문으로 배열에서 각 운동 객체를 하나씩 꺼냅니다.
각 객체를 목록 항목(<li></li>) 태그로 감쌉니다.
완성된 목록 항목들을 1단계에서 만든 <ul></ul> 요소 안에 삽입합니다.

1단계: 빈 순서 없는 목록 요소 만들기

index.html 파일(또는 CodePen 같은 도구를 사용한다면 HTML 창)에 아래 코드를 추가해 빈 목록 요소를 만듭니다.

<ul class="exercise-list"></ul>

다음으로 이 목록 요소에 대한 참조를 변수에 담아 두면, 나중에 자바스크립트로 항목을 손쉽게 추가할 수 있습니다. 스크립트 파일 상단에 아래 코드를 작성하세요.

let exerciseList = document.querySelector(".exercise-list");

2단계: 운동 객체 순회하기

배열 안에는 개별 운동 객체들이 들어 있으므로, 무언가를 처리하려면 먼저 각 객체를 하나씩 순회(iterate)해야 합니다. 객체 배열 바로 아래에 다음 코드를 추가하세요.

for (let exercise of exerciseObjects) {
  console.log(exercise.name);
}

지금까지 작성한 스크립트 파일 전체는 다음과 같습니다.

let exerciseList = document.querySelector(".exercise-list");

let exerciseObjects = [
  {
    name: "Deadlift",
  },
  {
    name: "Push-up",
  },
  {
    name: "Pull-up",
  },
  {
    name: "Squat",
  },
];

for (let exercise of exerciseObjects) {
  console.log(exercise.name);
}

브라우저 콘솔을 열어 확인하면 각 운동 이름이 출력되는 것을 볼 수 있습니다.

JavaScript 객체를 HTML 요소로 표시하는 방법 – 단계별 완벽 가이드

이제 각 운동 객체에 개별적으로 접근할 수 있게 되었습니다.

3단계: 각 운동을 목록 항목(li) 요소로 감싸기

수집한 운동 데이터를 <li> 태그로 감싸 보겠습니다. 먼저 반복문이 시작되기 전에 결과를 누적할 빈 문자열 변수를 선언합니다.

let exerciseItems = "";

그다음 반복문 내부에 아래 코드를 추가해, 매 회전마다 운동 이름을 <li> 태그로 감싸 누적합니다.

exerciseItems += "<li>" + exercise.name + "</li>";

반복문 밖에서 console.log(exerciseItems)를 실행하면, 각 운동이 목록 항목 태그로 감싸진 문자열이 콘솔에 출력되는 것을 확인할 수 있습니다.

4단계: 운동 항목을 목록에 추가하기

마지막으로, 반복문 바로 아래에 다음 한 줄을 추가하면 완성된 HTML 문자열이 목록 요소에 주입됩니다.

exerciseList.innerHTML = exerciseItems;

모든 과정을 올바르게 따라 했다면, 브라우저 화면에 운동 목록이 모두 표시될 것입니다.

전체 코드 정리

지금까지 작성한 전체 코드는 다음과 같습니다. 즉시 실행 함수(IIFE)로 감싸 전역 스코프 오염을 방지하는 것도 좋은 습관입니다.

(function () {
  let exerciseList = document.querySelector(".exercise-list");

  let exerciseObjects = [
    {
      name: "Deadlift",
    },
    {
      name: "Push-up",
    },
    {
      name: "Pull-up",
    },
    {
      name: "Squat",
    },
  ];

  let exerciseItems = "";

  for (let exercise of exerciseObjects) {
    exerciseItems += "<li>" + exercise.name + "</li>";
  }

  exerciseList.innerHTML = exerciseItems;
})();

동작하는 전체 코드는 아래 CodePen에서 직접 확인하고 실험해 볼 수 있습니다.