📌 별점 평가 구현
- 사용자가 정의한 star-rating 요소를 참조해서 star의 개수를 정한다.
- star 요소를 클릭하면 화면에 별점 개수가 나타난다.
- 별점 평가는 재사용할 수 있어야한다.
내가 작성한 코드는 아래와 같다.
✔️ 먼저, 원하는 star 요소의 개수를 dataset 속성을 이용해서 작성한다.
<div class="star-rating" data-max-rating="5"></div>✔️ 그리고 요소의 참조를 StarRating 함수에 전달하고 star-rating 요소를 동적으로 생성한다.
import StarRating from './star-rating/index.js';
const $containers = [...document.querySelectorAll('.star-rating')];
$containers.forEach($container => {
StarRating($container);
});✔️ 이번 실습에서는 CustomEvent를 사용해보았다.
CustomEvent는 우리가 흔히 사용하는 click, change 등의 이벤트와 동일하지만 다른 점은 직접 만들 수 있다는 점이다.
starElement.addEventListener('click', () => {
stars("selected", score);
const event = new CustomEvent('rating-change', {
detail: score
});
$container.dispatchEvent(event);
});CustomEvent는 생성자 함수이다.
위와 같이 event = new CustomEvent(이벤트 이름, 이벤트 속성)를 생성해주고 2개의 파라미터를 입력해 준다.여기서는 'rating-change'라는 커스텀 함수를 생성하고, detail 속성에는 score를 넣어 주었다.
그리고 starElement에 클릭 이벤트가 발생하면 $container에 dispatchEvent라는 함수를 호출해서 해당 메서드를 실행시켜 주었다.
✔️ App.js 파일에서 이벤트 'rating-change'를 캐치해서 화면에 표시해 주었다.
$containers.forEach(($container, i) => {
StarRating($container);
$container.addEventListener('rating-change', e => {
const rating = e.detail;
$currentRatings[i].textContent = rating;
});
});