[React] CSS 없이 간단한 별점 기능(Star Rating) 구현하기

책 후기를 작성하는 웹페이지를 만들면서 별점 기능이 필요해 구현해 보았다.

구글링을 해보니 굉장히 다양한 방법으로 구현한 다양한 유형의 별점 기능들이 있었다. 0.5점(별 반 개) 단위로 별점을 매기기도 하고, hover를 하면 색이 변하게 한다거나 드래그를 해서 별점을 매기는 방법도 있었다.

 

그러나 대부분의 별점 기능들이 꽉 찬 별 모양(★)을 점수에 따라 색깔만 바꾸는 형식으로 이루어졌다. 나는 꽉 찬 별 모양과 테두리만 있는 별 모양(☆)을 함께 사용하고 싶었기 때문에 다른 방식으로 별점 기능을 구현했다.

 

 

별 모양을 그리기 위해 react-icons에서 위의 두 아이콘을 사용하였다.

https://react-icons.github.io/react-icons/search?q=pistar

 

 

 

hover나 드래그 기능 없이 클릭으로 점수가 변하게 하는 간단한 별점 기능을 구현하였다.

 

import { useState } from "react";
import { PiStarFill, PiStarLight } from "react-icons/pi";

export default function Star() {
  const [rating, setRating] = useState(3);

  return (
    <div>
      {[...Array(rating)].map((a, i) => (
        <PiStarFill className="star-lg" key={i} onClick={() => setRating(i + 1)} />
      ))}
      {[...Array(5 - rating)].map((a, i) => (
        <PiStarLight className="star-lg" key={i} onClick={() => setRating(rating + i + 1)} />
      ))}
    </div>
  );
}

별점(rating)에 따라 각 별의 개수를 조절하였다. 3점인 경우 꽉 찬 별 3개, 테두리 별 2개 이런 식이다.

별을 클릭하면 별점이 변하도록 하였다.

 

 

결과물