이번 시간에는 홈페이지의 버튼 작업과
가격표 형식 작업을 하겠습니다
먼저 가격표 형식부터 시작하겠습니다
먼저는 각 가격표 왼쪽에 달러 표시를
추가하는 것으로도 좋은 변화입니다만
이론적으로는 가격 데이터를 가져올 때
데이터가 더 복잡할 수도 있습니다
예를 들면 각 가격표마다
소수점 표시가 있을 수도 있습니다
그러므로 표준 형식을 설정해서
각 가격이 처음부터 동일한 형식으로
설정되도록 하겠습니다
이 가격표 형식은 다른 컴포넌트에서도
사용할 예정이므로
폴더를 하나 더해서 작업하겠습니다
위치는 소스 폴더(src) 안이고, 이름은 유틸리티를 줄여서 util로 하겠습니다
여기에 형식 파일(formatting.js)을 생성하겠습니다
이제 이 formatting.js에서
화폐 형식 변환기 (currencyFormatter)를 설정하겠습니다
이 currencyFormatter로 내보내서
다른 파일에서 사용할 수 있도록 하겠습니다
그리고 자바스크립트에서 제공하는 기능을 하나 사용하겠습니다
이 기능은 저희가 NumberFormat이라는 새 국제화(internalization) 객체를
인스턴스화할 브라우저에서 지원하는 기능이고
이 기능으로 가격 형식을 화폐 시장에 따라 설정할 수 있습니다
여기에서는 미국 시장인 en-US를 설정하겠습니다
그리고 두 번째 인수로서
화폐나 숫자 전반의 형식을
어떻게 설정할지 구성할 수 있습니다
예를 들면 여기에서
형식(style)을 화폐(currency)에 적용할 수 있습니다
이 화폐가 사용 가능한 형식이기 때문입니다
그리고 화폐 키(key)를 추가해서
미국의 달러를 의미하도록 하겠습니다
이 currencyFormatter를 이제
MealItem.jsx로 가져오겠습니다
즉 currencyFormatter를 한 단계 위에서 가져오기 위해
util 폴더로 가서
formatting.js에서 가져오겠습니다
meal.price (음식.가격)를 반환할 때
currencyFormatter.format을 적용하겠습니다
조금 지나친 작업일 수도 있지만
한 번 배워두면
유용하게 사용한 기능입니다
특히 다른 형식의 숫자를 다룰 때 도움이 됩니다
이제 다음 시간에는 버튼 작업을 해 보겠습니다