[javascript] jQuery를 사용하여 데이터 렌더링하기

01 Dec 2023

javascript

jQuery는 JavaScript를 간편하게 다루기 위해 설계된 인기있는 라이브러리입니다. 이번 포스트에서는 jQuery를 사용하여 데이터를 렌더링하는 방법을 알아보겠습니다.

1. jQuery 라이브러리 추가하기

먼저, HTML 파일의 <head> 태그 안에 jQuery 라이브러리를 추가해야 합니다. 다음의 CDN 링크를 이용하면 간단히 추가할 수 있습니다.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

2. 데이터 가져오기

다음으로, 데이터를 가져와서 jQuery를 사용하여 렌더링하는 코드를 작성해보겠습니다. 예를 들어, 서버에서 JSON 형식의 데이터를 가져오고자 한다면 다음과 같이 AJAX 요청을 사용할 수 있습니다.

$.ajax({
  url: "data.json",
  method: "GET",
  success: function(data) {
    // 데이터 가져오기 성공시 실행되는 콜백 함수
    renderData(data);
  },
  error: function() {
    // 데이터 가져오기 실패시 실행되는 콜백 함수
    console.log("데이터 가져오기 실패");
  }
});

3. 데이터 렌더링하기

renderData() 함수를 작성하여 데이터를 렌더링하는 로직을 처리할 수 있습니다. 이 함수에서는 가져온 데이터를 기반으로 HTML 요소들을 생성하고, 원하는 위치에 추가합니다. 예를 들어, <ul> 요소에 리스트 아이템들을 추가하는 경우 다음과 같이 작성할 수 있습니다.

function renderData(data) {
  var $list = $("<ul>");

  $.each(data, function(index, item) {
    var $item = $("<li>").text(item.name);
    $list.append($item);
  });

  $("#container").html($list);
}

위 예시 코드에서는 data라는 배열에 있는 각 객체의 name 속성 값을 읽어와 리스트 아이템으로 추가하고 있습니다. 그리고 $list 변수에 모든 리스트 아이템들을 추가한 후, HTML 문서의 id가 “container”인 요소에 해당 리스트를 추가하고 있습니다.

4. 결과 확인하기

위의 예시 코드를 작성하고 HTML 파일을 열어보면, 데이터가 성공적으로 가져와진 후 렌더링되는 것을 확인할 수 있습니다.

jQuery를 사용하여 데이터를 렌더링하는 방법에 대해 알아보았습니다. jQuery의 다양한 기능과 메소드를 적절히 활용하면 다양한 데이터 렌더링 처리를 쉽게 구현할 수 있습니다.

더 자세한 jQuery 사용법은 공식 문서를 참조하시기 바랍니다.