라이브러리 없이! 평점 기능 만들기 ⭐⭐⭐⭐⭐

예전에 프리온보딩을 통해서 별점을 만들어놓고...
까먹지 않기 위해서 블로그를 작성해본댜~

사실 까먹어서 지금 작성함... ㅎ

다섯 개의 별을 그리기 위해서
const starArr = [1, 2, 3, 4, 5]; 배열을 작성한 후
반복해서 별을 출력해주면 아래와 같이 나오게 된다.

import styled from "styled-components";
import { FiStar } from "react-icons/fi";

export default function App() {
  const starArr = [1, 2, 3, 4, 5];
  return (
    <>
      {starArr.map((idx) => (
        <Star />
      ))}
    </>
  );
}

const Star = styled(FiStar)`
  font-size: 50px;
`;

그리고 나서 이제 마우스가 올라갔을 때와 나갔을 때,
별의 색이 변해지기 위해서는 onMouseEnter와 onMouseLeave를 이용해서 코드를 작성해주어야 한다.

onMouseEnter

• The event occurs when the pointer is moved onto an element
• 포인터가 객체의 영역에 들어왔을 때 발생되는 이벤트

onMouseLeave

• The event occurs when the pointer is moved out of an element
• 포인터가 객체의 영역에 나갔을 때 발생되는 이벤트

그래서 이 둘의 이벤트를 가지고 어떻게 색을 표현할 수 있을까?

1) onMouseEnter이벤트가 발생했을 때의 값을 useState의 setHover를 이용하여 저장해둔다.
1) onMouseLeave 이벤트가 발생했을 때 setHover가 0이 되어진다.
2) starArr 배열의 index와 hover의 값이 같거나 작다면 현재 별부터 앞의 별까지 색이 칠해진다.
즉, fill의 함수를 통해 fill={idx <= hover ? "#000" : "#E5E5E5"} 값을 칠할 수 있다.

import styled from "styled-components";
import { FiStar } from "react-icons/fi";
import { useState } from "react";

export default function App() {
  const starArr = [1, 2, 3, 4, 5];
  const [hover, setHover] = useState(0);
  return (
    <Rating>
      {starArr.map((idx) => (
        <Star
          key={idx}
          onMouseEnter={() => setHover(idx)}
          onMouseLeave={() => setHover(0)}
          fill={idx <= hover ? "#000" : "#E5E5E5"}
        />
      ))}
    </Rating>
  );
}

const Rating = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
`;

const Star = styled(FiStar)`
  font-size: 50px;
  color: transparent;
`;

이제 선택된 별이 칠해지기 위해서는 onClick이벤트를 이용하여 setStarNum(idx)에 값을 저장해주어야 한다.

이 때 선택 되고 난 뒤의 별의 색은 동일해야하므로 onMouseEnter에 조건도 추가해주어야 한다.

그래서 최종코드를 보면 다음과 같다.