React 별점 기능 구현 컴포넌트 만들어보기

React로 별점 기능 구현 컴포넌트를 만들어 보았습니다 ⭐

별 말고 불도 가능합니다

---

 

예쁜 별 svg 파일을 찾기 위해 react-icons 라는 모듈을 이용해 보았습니다.

 

👉설치 방법

npm install react-icons/fa

👉사용 방법

import { FaStar } from 'react-icons/fa'

 

별 svg 이외에도 수많은 svg파일을 제공하며 License를 참고하여 이용하면 많은 도움이 될 듯 합니다.

저는 별 말고 불 모양으로 실험해보았습니다.

 

 

👉별점 기능을 구현하기 위한 핵심

css 설정

- mouse가 component위에 over되어 있으면 css class를 rating-star-over, 그렇지 않으면 rating-star-out으로 지정한다.

- isHover값이 변하면 css class가 변하도록 구성한다.

- rating-star-over class는 svg의 path를 채우고 싶은 색상을 선택해서 fill property에 넣어준다.

- rating-star-out class는 svg의 기본 색상을 지정한다.

 

react 설정

- 해당 별 svg component에 마우스를 올리면 (OnMouseOver) 임시적으로 어디까지 hover 되었는지 tempisHover에 true, false로 기록해두고, 마우스를 따라 점수를 보여주기 위해 isHover를 업데이트한다.

- 해당 별 component를 클릭하면 몇점을 클릭했는지 score에 저장한다.

- component를 빠져나오면 (OnMouseOut) 현재 몇점인지 저장된 score값만큼 컴포넌트에 색상을 채워주도록 isHover를 업데이트 한다.

 

전체 코드

1. RatingStar.js

import React, { useState } from "react";
// import { FaStar } from 'react-icons/fa'
import { PiFlameFill } from 'react-icons/pi'

import './RatingStar.css'


const RatingStar = () => {
    const [isHover, setIsHover] = useState([false, false, false, false, false]);
    const [score, setScore] = useState(-1);
    let tempisHover = [false, false, false, false, false];

    const handleMouseOver = index => {
        tempisHover = [false, false, false, false, false];
        for(let i=0 ; i<index+1 ; i++){
            tempisHover[i] = true
        }
        setIsHover(tempisHover);
    }

    const handleMouseOut = () => {
        tempisHover = [false, false, false, false, false];
        for(let i=0 ; i<score+1 ; i++){
            tempisHover[i] = true
        }
        setIsHover(tempisHover);
    }

    const handleOnClick = index => {
        setScore(index);
    }

    return(
    <>
        <div className="rating-stars">
            {[0,1,2,3,4].map((element, index) => (
                <PiFlameFill 
                    className={isHover[element] ? "rating-star-over" : "rating-star-out"}
                    key={index}
                    size={16}
                    onMouseOver={() => handleMouseOver(index)}
                    onMouseOut={handleMouseOut}
                    onClick={() => handleOnClick(index)}
                    />
            ))}
        </div>
    </>
    )

}

export default RatingStar;

 

2. RatingStar.css

.rating-stars path{
    fill: rgb(216, 216, 216);
}

.rating-star-over path{
    cursor: pointer;
    fill: #746257;
}

.rating-star-out path{
    cursor: pointer;
    fill: rgb(216, 216, 216);
}

---

Reference

[React] 리뷰, 별점 기능구현하기

 

React Icons