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

리뷰 작성 페이지를 구현할 때 빠질 수 없는 별점 기능을 간단하게 만들어보려 한다.

React + Styled-component + 아이콘 라이브러리(React Icons)를 사용하여 구현해 보자

 

 

 

 

1. Icon + CSS 생성

기능을 구현하기 전 별 모양의 Icon이 필요하기에 Icon 생성을 먼저 해보겠다.

우선 별 모양의 Icon 생성을 위해 React에서 사용 가능한 아이콘 라이브러리 중 하나인 React Icons를 설치해 준다.

npm install react-icons

 

 

 

 

설치 후 React Icons 홈페이지에서 자신이 원하는 Icon을 찾아준다.

https://react-icons.github.io/react-icons/

React Icons

 

 

 

 

별 모양의 Icon이 필요하기에 star Icon을 찾아준 뒤 아래와 같이 코드를 작성해 주고 잘 출력되는지 확인해 주자

import { FaRegStar, FaStar } from 'react-icons/fa';

const StarRating = () => {

    return (
        <div>
            <FaStar />
            <FaRegStar />
        </div>
    )
}

export default StarRating;

 

 

 

 

현재 출력되는 Icon의 색과 크기를 수정해 주자. 

나는 Styled-component를 사용하여 CSS를 수정하려 한다. 우선 Styled-component를 설치해 주자

npm install styled-components

 

 

 

 

설치해 준 뒤 아래와 같이 코드를 추가해 주면 크기와 색이 변경되는 것을 확인할 수 있다.

import { FaRegStar, FaStar } from 'react-icons/fa';
import styled from "styled-components";

const StarSection = styled('div')`
    .star {
        color : yellow;
        font-size : 52px;
    }
`;

const StarRating = () => {

    return (
        <StarSection>
            <FaStar />
            <FaRegStar />
        </StarSection>
    )
}

export default StarRating;

 

 

 

이제 준비는 끝났으니 본격적으로 기능을 구현해 보자.

 

728x90

반응형

 

 

 

 

 

 

 

2. 기능 구현

비어있는 별 Icon 5개를 출력해 주고 클릭 위치에 따라 별을 채워주는 식으로 구현을 해보겠다.

 

우선 5개의 빈 별을 출력해 주는 코드는 아래와 같다. 

import { FaRegStar, FaStar } from 'react-icons/fa';
import styled from "styled-components";

const StarSection = styled('div')`
    .star {
        color : yellow;
        font-size : 52px;
    }
`;

const StarRating = () => {

    const ratingStarHandler = ():any[] => {
        let result:any[] = [];
        for (let i:number=0; i<5; i++) {
            result.push(<FaRegStar className="star" />);
        }
        return result;
    }

    return (
        <StarSection>
            {ratingStarHandler()}
        </StarSection>
    )
}

export default StarRating;

 

 

반복문을 통해 Icon 5개를 출력해 주었다. 아래 사진과 같이 빈 별 5개가 출력이 되는 것을 확인할 수 있다.

 

 

 

이제 별을 채워주는 이벤트를 구현해 보겠다. 

클릭한 별 위치에 따라 앞에 있는 별들 또한 색이 채워지는 형태로 만들어보자

 

useState를 추가해 주고 3항 연산자와 onClick 이벤트를 사용해 구현해 주었다.

import { FaRegStar, FaStar } from 'react-icons/fa';
import styled from "styled-components";
import { useState } from "react";

const StarSection = styled('div')`
    .star {
        color : yellow;
        font-size : 52px;
        cursor : pointer;
    }
`;

const StarRating = () => {
    const [starScore, setStarScore] = useState<number>(0);

    const ratingStarHandler = ():any[] => {
        let result:any[] = [];
        for (let i:number=0; i<5; i++) {
            result.push(
                <span key={i+1} onClick={() => setStarScore(i+1)}>
                        {
                            i+1 <= starScore ?
                                <FaStar className="star" />
                                :
                                <FaRegStar className="star" />
                        }
                    </span>);
        }
        return result;
    }

    return (
        <StarSection>
            {ratingStarHandler()}
        </StarSection>
    )
}

export default StarRating;

 

 

 

클릭한 위치에 따라 별이 채워지는 것을 확인할 수 있다.