[내일배움캠프-TIL]2. React-9기 1주차 - 화면구성

오늘은 3주차 강의숙제를 만들었다.

이런 형식으로 만들면 되는 숙제였다. 기본적인 틀과 구성은 갖춰져 있었고 빨간 테두리와 파란 테두리 박스 부분을 만드는게 숙제였다.
빨간 테두리 박스는 HTML, CSS이기도 하고 구성이 짜여 있기도 해서 금방했고, 파란색 부분도 부트스트랩에서 Grid Card를 가져와서 구성하면 어렵지 않았다.
이제 여기서 기능을 구현해야하는데 빨간 테두리 input box에서 입력된 값들로 목록을 추가를 했다.

function push() {
 let img = $("#img").val();
 let foodTitle = $("#foodTitle").val();
 let rating = parseInt($("#rating").val(), 10);
 let comment = $("#comment").val();

input에 입력된 값들을 하나하나 변수에 할당해주었다. rating변수만 parseInt가 붙었는데 이건 설명하겠다.

let html = `<div class="col">
   <div class="card h-100">
     <img src="${img}" class="card-img-top" alt="..." />
     <div class="card-body">
       <h5 class="card-title">${foodTitle}</h5>
       <p class="card-text">${ratingstar}</p>
       <p id="card-comment">${comment}</p>
       <button class="card-button">주문하기</button>
     </div>
   </div>
 </div>`;
 $("#cards").append(html);

받아온 변수들을 카드에 추가해야하기 때문에 html변수 안에 카드구성 마크업을 가져온 후 위치에 맞게 변수들을 넣어준다. 그 다음 append를 사용하여 기존 카드 목록에 추가를 시킨다.
이제 여기서 하나 걸렸던게 옵션 값들을 이런식으로 해놨다.

<option selected>별점 선택</option>
<option value="1">⭐</option>
<option value="2">⭐⭐</option>
<option value="3">⭐⭐⭐</option>
<option value="4">⭐⭐⭐⭐</option>
<option value="5">⭐⭐⭐⭐⭐</option>

이런식으로 하게 되면 push함수에서 값을 가져올때 value값을 가져오게 되는데 내가 원하는건 value값에 따른 별표 모양이다.
그래서 switch case문을 사용했는데 또 그게 맘대로 되질 않았다. 그게 이유를 생각해 보니 switch case 문에는 숫자로 들어가는데 내가 받아온 값들은 문자열이었던 거다.
그래서 받아온 값을 숫자열로 바꾸기 위하여 parseInt를 사용하여 숫자열로 바꾸어줬고.

let rating = parseInt($("#rating").val(), 10);

switch case문을 사용하여 문제를 해결했다.

let ratingstar = "";
  console.log(rating);
  switch (rating) {
    case 1:
      ratingstar = "⭐";
      break;
    case 2:
      ratingstar = "⭐⭐";
      break;
    case 3:
      ratingstar = "⭐⭐⭐";
      break;
    case 4:
      ratingstar = "⭐⭐⭐⭐";
      break;
    case 5:
      ratingstar = "⭐⭐⭐⭐⭐";
      break;
    default:
      ratingstar = "없음";
  }

결과는 이런식으로 잘 나온다.

살짝 헤매서 아쉽긴한데 헤맨 부분을 잘 잡아서 재밌었다.