[React]별점 기능

import React, { useState } from "react";
import { FaStar } from "react-icons/fa";
import "./StarRating.css";

const StarRating = ({ onChangeHandler }) => {
  const [rating, setRating] = useState(null);
  const [hover, setHover] = useState(null);

  return (
    <div>
      {[...Array(5)].map((star, i) => {
        const ratingValue = i + 1;
        return (
          <label>
            <input
              className="rating"
              type="radio"
              name="star"
              value={ratingValue}
              onChange={(e) => onChangeHandler(e)}
              onClick={() => setRating(ratingValue)}
            />
            <FaStar
              className="star"
              color={ratingValue <= (hover || rating) ? "#fcbe32" : "#e4e5e9"}
              size={40}
              onMouseEnter={() => setHover(ratingValue)}
              onMouseLeave={() => setHover(null)}
            />
          </label>
        );
      })}
    </div>
  );
};

export default StarRating;

//css
.rating {
  display: none;
}
.star {
  cursor: pointer;
}

여행 리뷰 사이트를 만들다보니 별점이 꼭 필요했다 구글링하다가 유튜브에서 보고 만들었는데 유튜브 설명 짱
상위 컴포넌트에는 onChangeHandler로 내려줬다
유튜브링크