1. 별점을 입력하는 컴포넌트 만들기
Rating.js 파일을 만들고
Rating이라는 컴포넌트와 Star라는 컴포넌트를 만든다.
Star컴포넌트는 별 하나를 보여주는 컴포넌트이다.
selected라는 prop의 역할은 값이 참일 때,
selected라는 css 클래스를 추가해서 색깔을 다르게 보여줄 것이다.
Rating이라는 컴포넌트는 별 5개를 보여주는 컴포넌트이다.
value라는 prop이 있는데 그 값에 따라서
선택된 별의 개수를 다르게 보여줄 것이다.
그리고 간단한 css도 추가해준다.
2. ReviewList 컴포넌트에 가서
각 리뷰에서 숫자로 보여주던 별점을 Rating 컴포넌트로 바뀌어서 조립해준다.
3. 확인하기
별점보이는 것을 잘 확인할 수 있다.
Rating 컴포넌트에 배열 랜더링을 적용해서 코드를 정리해보기
대문자 RATINGS라는 배열을 만들어 줄 것이다.
이 것은 각 별점이 나타내는 값을 요소로 하는 배열이다.
1점에서부터 5점까지 있다.
이 배열을 가지고 map 메소드를 사용해서
앞에서 반복해서 만들었던 코드를 깔끔하게 정리해주겠다.
여기서 배열을 랜더링할 떄 반드시 key값을 지정해주어야한다.
