[React] 별점(Star Rating) 라이브러리로 구현하기

숫자로만 표시되던 평점을 별점 UI로 표현하고 싶어 관련 라이브러리를 찾아보았다.
그 과정에서 아주 간편하게 별점 UI를 구현할 수 있는 라이브러리를 발견해 프로젝트에 적용해보았다.

특히 소수점(반쪽 별)까지 자동으로 처리해줘서 별도의 로직 없이도 자연스러운 평점 표시가 가능해 사용성이 좋았다.

결과

 

 

---

 

 

사용한 라이브러리

react-simple-star-rating

• 가볍고 설정이 단순함
• 소수점 별점 지원
• 클릭 가능한 별점 / 표시용 별점 모두 가능

 

라이브러리 설치

npm install react-simple-star-rating

 

 

별점 컴포넌트 생성

영화 API(TMDB)는 10점 만점 평점을 반환하기 때문에, 별점 UI(5점 만점)에 맞게 2로 나눠서 변환했다

 

import { Rating } from "react-simple-star-rating"; 

// 별점 컴포넌트 
const StarRating = ({ rating }) => { 
	return ( 
    	<Rating 
            initialValue={rating / 2} 	// 10점 만점을 5점으로 변환 
            readonly={true} 			// 클릭 비활성화 (표시 전용) 
            size={20} 					// 별 크기 
            fillColor="gold" 			// 채워진 별 색 
            emptyColor="gray" 			// 빈 별 색 
            allowFraction={true} 		// 소수점(반쪽 별) 허용 
         /> 
     ); 
}; 

export default StarRating;

 

 

---

다른 컴포넌트에서 사용하기

내가 사용한 TMDB API 데이터(vote_average)는 소수점이 매우 길게 나온다 (예: 7.834)

 

1. 방식 A: movie.vote_average 그대로 넣을 때
   • 라이브러리에 7.834라는 숫자가 그대로 전달
   • 라이브러리는 내부 로직에 따라 이걸 7.8로 그릴 수도 있고, 그냥 8.0에 가깝게 꽉 채워버릴 수도 있다 (반올림 기준이 모호함)
2. 방식 B: Number(vote_average.toFixed(1))를 쓸 때
   • 7.834가 강제로 7.8로 딱 잘린다
   • 라이브러리에 정확히 7.8이라는 숫자만 전달되므로 내가 의도한 눈금만큼만 별이 칠해짐

import StarRating from "./StarRating"; 

<h4> 
	<StarRating rating={Number(vote_average.toFixed(1))} /> 
</h4>

 

• TMDB의 10점 만점 평점 → 5점 만점 별점으로 자연스럽게 변환
• 7.8 / 8.3 같은 소수점 평점도 반쪽 별로 자동 표시
• 읽기 전용(readonly)으로 설정하여
  👉 사용자 입력이 아닌 정보 표시용 UI로 사용

 

---

 

정리

• ⭐ 별점 UI를 직접 구현할 필요 없음
• ⭐ react-simple-star-rating 하나로 빠르게 해결
• ⭐ 소수점 처리까지 자동으로 지원
• ⭐ 영화 사이트처럼 “평점 표시”가 필요한 프로젝트에 매우 적합

영화 평점 UI는 복잡할 것 같지만 라이브러리를 활용하면 코드 몇 줄로 깔끔하게 해결할 수 있다