React) 별점 기능 설명

프로젝트 구현 중 별점을 추가해야하는 기능이 발생했다.

  
  const stars = [1,2,3,4,5];
  const [currentStar, setCurrentStar] = useState(0);
  const starClick = (e) => {
    setCurrentStar(e);
    // setStarColor('yellow');
  };
  
  {stars.map((star, idx) => (
            <span
              className="star_icon"
              key={idx}
              id={star}
              onClick={() => {
                starClick(star);
              }}
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="40"
                height="39"
                viewBox="0 0 14 13"
              >
                <path
                  id="star"
                  d="M9,2l2.163,4.279L16,6.969,12.5,10.3l.826,4.7L9,12.779,4.674,15,5.5,10.3,2,6.969l4.837-.69Z"
                  transform="translate(-2 -2)"
                  fill={star <= currentStar ? '#FFD400' : 'grey'}
                />
              </svg>
            </span>
          ))}

위 코드와 같이 기본 svg태그 내 fill속성에서 색상이 grey색상이었는데,
stars.map을 사용해서 각 별들을 star로 나타내며, 각각의 별들은 1,2,3,4,5로 표현할 수 있다.
이때 만약에 3번째 별을 눌렀으면 setCurrentStar(e) 코드를 통해 e값인(star 3점) 점수가 들어가게 된다.
그러면 그 currentStar에 점수 3점보다 아래에 있는 star들은 노란색으로 변경하고 그거보다 높은 점수 별은 grey색상으로 나타낸다.

이렇게 하면 이렇게 유동적인 별점을 변경할 수 있는 코드를 작성 가능하다.