별점기능 구현하기

import React, { useState } from "react";
import styled from "styled-components";

const StarRate = ({ onChange }) => {
  const [rate, setRate] = useState(0);

  const handleStarClick = (select) => {
    setRate(select);
    onChange(select);
  };

  return (
    <StarContainer>
      {[1, 2, 3, 4, 5].map((star) => (
        <Star
          key={star}
          filled={star <= rate}
          onClick={() => handleStarClick(star)}
        >
          ★
        </Star>
      ))}
    </StarContainer>
  );
};

export default StarRate;

const StarContainer = styled.div`
  display: inline-block;
`;

const Star = styled.span`
  font-size: 24px;
  color: ${({ filled }) => (filled ? "gold" : "lightgray")};
  cursor: pointer;
`;

1. onChange()를 props로 받아옴

부모 컴포넌트에서 useForm을 사용한 onChange함수 ➡️ 선택한 별점 값을 선언한 변수에 저장

 

2. handleStarClick()

별을 선택했을 때 실행되는 함수 해당 컴포넌트에서의 rate값과 부모 컴포넌트에서의 rate값을 onChange함수를 받아와서 저장

 

3. star 컴포넌트

1~5까지의 숫자가 담긴 배열을 map함수를 이용해 <star>컴포넌트를 렌더링, filled 속성으로 선택한 별점보다 작거나 같으면 true를 반환하여 3을 선택하면 3개의 별이 칠해지도록 구현

 

4. onClick()

★을 누르면 handleStarClick()함수 실행

 

 

5.  color: ${({ filled }) => (filled ? "gold" : "lightgray")};
filled를 props로 받아서 해당 컴포넌트의 filled속성이 true라면 노란색을 칠하고, false라면 회색을 칠함