한식 메뉴 렌더링 (TIL #5)

과제 시작

과제를 읽으며 반복문만 잘 터득한 다면 바로 만들어볼 수 있는 렌더링 과제인것 같아서 5주차 강의를 다 보기 전에 마무리해보았다.

과제 설명

주어진 배열(Array) 데이터를 페이지에 렌더링 하는 과제로 한식 메뉴를 사용자에게 보여주면 된다.

forEach를 사용해서 페이지에 데이터를 붙여넣었으며 렌더링은 JQuery이용해서 ready()함수에 적용하였다.

$(document).ready(function () {
    // 반복문 코드
})

검색했던 부분들

map와 forEach

사실 과제에는 좀 더 알아보기 편하다고 생각하는 forEach를 써서 완성했지만, 둘의 차이가 기억이 안 나서 검색해보았다. 가장 큰 차이는 배열을 돌때 forEach는 원본 array을 도는 함수이고, map은 원본array를 돌며 새로운 array를 리턴하는 차이가 있었다.

이 차이를 이번 과제에 적용한다면,

forEach를 사용한 코드:

const menuItems = [...];

function displayMenu(items) {
  items.forEach(item => {
    let name = item['name'];
    let description = item['description'];

    let temp_html = `
		<li class="menu-item">
		<h2>${name}</h2>
		<p align="center">${description}</p>
		</li>`;

    $('#menu-list').append(temp_html);
  });
}

각 요소를 돌며 새로운 html을 그때마다 만들며 menu-list에 추가하는 방식

map을 사용한 코드:

function displayMenu(items) {
  const menuHtml = items.map(item => `
	<li class="menu-item">
	<h2>${item.name}</h2>
	<p align="center">${item.description}</p>
	</li>
  `).join('');

  $('#menu-list').html(menuHtml);
}

각 요소의 html이 모인 새로운 array를 만들어 한번에 menu-list에 추가하는 방식

마치며

이번 과제는 크게 어려운 점이 없어서 선택사항의 옵션을 추가해서 완성해보았다. 완성본은 아래와 같으며

고기 메뉴만 나오게 했을 때
버튼의 문구도 조금 바뀌는 포인트만 넣어보았다. 그리고 아마 미래에는 map을 아마 더 많이 쓸 것 같다.