저번 시간의 작업을 통해
음식 데이터를 가져올 수 있게 되었습니다
다음 단계로는 각 메뉴에 대한 정보를 더 많이
화면에 띄우는 것입니다
즉 상세설명과 이미지 등의 정보 또한 표시하는 것입니다
이 작업을 위해 마크업을 몇 개 생성해야 합니다
이 작업은 선택사항인데, 여기에 새 컴포넌트를 추가해서
마크업을 생성할 때
이 새 컴포넌트에 추가해도 됩니다
마크업을 음식 컴포넌트의 이 목록 아이템에 넣어도 되지만
저는 이 새 컴포넌트에 넣도록 하겠습니다
이름은 MealItem.jsx 입니다
Meals.jsx에서는
각 메뉴 아이템을 반환하는데
가져온 음식 메뉴 하나당 음식 아이템 하나를 반환하게 됩니다
이 MealItem.jsx에서도
표준 컴포넌트 함수인 MealItem을 내보내겠습니다
지금 시점에서는 여기에서
마크업을 반환하겠습니다
이 마크업이 음식 목록의 음식 아이템을
정의하게 됩니다
즉 각 음식 아이템은 일단 목록 아이템이고
각 목록 아이템에는
meal-item이라는 CSS 클래스를 적용하겠습니다
이렇게 클래스를 추가함으로써
index.css에 있는 이 클래스, 즉
CSS 규칙에 선택된 클래스가
이 규칙으로 인해 아이템의 형식을
보기 좋게 만들어 줍니다
이 파일에는 관련 규칙도 있습니다
예를 들면 각 음식 아이템에
article을 설정할 수도 있습니다
이 모든 규칙은 제가 제공해드린 CSS 코드에 있습니다
여기에서 article 요소를 사용해서
음식 아이템을 구성하는 모든 내용을 감싸겠습니다
먼저 음식 사진인 이미지(img)를 반환하겠습니다
이 이미지를 가져오는 위치를
해당 컴포넌트로 받아올 때 입력값으로 받되
속성 입력값으로 받겠습니다
음식 데이터의 위치가 Meals.jsx이기 때문입니다
즉 그 데이터를 음식 아이템 컴포넌트로
보내야 하기 때문입니다
그러므로 속성을 좀 가져오게 되는데
이 부분은 임의로 정하시면 됩니다
음식 속성, 가격 속성, 이미지 속성 등
원하는 것을 가져올 수 있습니다
혹은 음식 속성 하나를 가져오되
이 모든 필드를 속성으로 포함하게끔
할 수도 있습니다
이 부분은 개인의 선택에 달렸습니다
저는 이 음식 속성 하나를 가져오겠습니다
그러므로 제 이미지를 가져오는 위치 또한
meal.image가 됩니다
meal.image로 작성하는 이유는
임시 백엔드의 데이터에서 보시면
각 음식이 이미지(image)라는 속성을 가지고 있기 때문입니다
상세설명, 가격, 이름, ID라는 속성도 있습니다
그래서 MealItem.jsx에서
해당 이미지의 대체 텍스트(alt text)도 설정하겠습니다
meal.name이 있고, 그 이미지 아래에
음식의 이름을 넣겠습니다
스타일링의 이유로 div로 감싸겠습니다
이 h3태그 사이에
meal.name을 반환하겠습니다
그 아래에는 p태그를 하나 만들어서
가격을 반환하겠습니다
이 부분에 클래스 이름을
meal-item-price로 설정하겠습니다
이것 또한 CSS 파일에 있는 클래스 이름입니다
여기에는 음식 가격을 반환하겠습니다
이 부분에 대한 형식도 곧 설정하겠습니다만
현재 시점에서는 그냥 이대로 반환하겠습니다
이 아래에는 또다른 문단을 만들어서
음식 상세설명을 반환하겠습니다
이 문단도 CSS 클래스를 받습니다
클래스 이름은 meal-item-description입니다
이제 조금씩 형태가 잡히고 있습니다
마지막으로는 이 div 아래에
문단을 하나 더하겠습니다
여기서 받을 클래스 이름은 meal-item-actions입니다
여기에는 버튼을 하나 추가해서
이 메뉴를 장바구니에 담을 수 있게 하겠습니다
물론 지금은 이 버튼이 작동하지 않지만
그 작업은 이후에 하겠습니다
이렇게 화면에 보일 메뉴 아이템 작업을 마쳤습니다
Meals.jsx로 넘어가서
작성한 내용을 적용하겠습니다
여기에 목록 아이템을 반환하는 대신에
방금 만든 MealsItem을 반환하는 것입니다
각 음식 메뉴는 키(key)를 받게 되는데
이 키는 여전히 meal.id입니다
그리고 제 경우에는
여기에 meal 속성을 하나만 사용했기 때문에
각 mealItem이 이 meal 속성을 받아야 합니다
그래서 그 meal을
이 루프에 설정하겠습니다
여기서 꼭 하셔야 하는 작업은
MealItem은 MealItem.jsx에서 가져와야 합니다
이제 이대로 저장하고 새로고침을 해 보면
이런 화면을 볼 수 있습니다
아직 이미지는 제대로 뜨지 않습니다
그 이유는, 백엔드 데이터로 돌아가 보시면
이미지에 대한 상대 경로만이 존재하는데
이것은 백엔드에서 상대적입니다만
이 이미지를 이렇게 프론트엔드로 가져올 수는 없습니다
그러므로 이미지에 대한 경로를 프론트엔드에 설정해야 합니다
즉 백엔드에 있는 URL을 더해야 하는 것입니다
이 작업을 위해 템플릿 리터럴 기능이 필요합니다
이 기능은 자바스크립트에서 백틱으로 사용합니다
따옴표가 아닌 백틱이라는 기호입니다
이 기능으로 부분적으로 동적인
특수한 문자열을 생성할 수 있습니다
먼저 직접 입력하는 하드코딩(값을 고정해놓은 코딩) 부분을 작업하겠습니다
즉 백엔드 URL인 localhost:3000/입니다
그 다음에는 meal.image를 주입하겠습니다
이것은 각 메뉴에 고유한 이미지 경로입니다
그리고 이 작업을 통해, 즉
이미지 소스를 바꾸는 작업을 완료한 후에
저장 후 확인해 보면 이미지가 정상적으로 보입니다
강의 초반의 상태에 비해 아주 큰 성과입니다
벌써 배가 좀 고파지는 것 같습니다
이번 강의에서 이처럼 아주 중요한 작업을 완료하였고
다음 단계로는
장바구니를 작업할 수도 있겠지만
그 부분보다는 먼저
이 버튼 형식을 한번 살펴봅시다
버튼 모양을 개선할 수 있을 것 같습니다
그러므로 다음 강의에서는 버튼 형식 작업과
가격표 형식 작업을 먼저 한 후에
장바구니 기능을 마지막으로 작업하겠습니다