사용자 지정 React 별점 구성 요소 만들기

이 튜토리얼에서는 사용자 정의 React 별 등급 구성 요소를 구축할 것입니다. 이러한 유형의 구성 요소를 통해 사용자는 한 번의 마우스 클릭으로 1~5개의 별 등급을 부여할 수 있습니다.

완성된 구성 요소의 모습과 기능은 다음과 같습니다.



Create React App을 사용하여 애플리케이션을 설정하여 시작하겠습니다.
npx creat-react-app star-rating
그런 다음 /src 디렉토리에서 StarRating.js라는 구성 요소에 대한 파일을 만듭니다. 기본 구성 요소로 시작하여 설정을 테스트한 다음 전체 기능을 구축합니다.

import React, { useState } from "react";

const StarRating = () => {  
  return (<p>Hello World</p>);
};

export default StarRating;

다음으로 구성 요소에 로드할 App.js 파일의 내용을 바꿉니다.

import StarRating from "./StarRating";
import "./App.css";

const App = () => {
  return (
    <div className="App">
      <StarRating />
    </div>
  );
};

export default App;

npm start 명령을 실행하고 구성 요소가 로드되고 있는지 테스트합니다.

이제 StarRating.js 파일로 돌아가서 가장 먼저 해야 할 일은 배열에 매핑하여 수행하는 구성 요소 출력 5개를 갖는 것입니다.

const StarRating = () => {
  return (
    <div className="star-rating">
      {[...Array(5)].map((star) => {        
        return (         
          <span className="star">&#9733;</span>        
        );
      })}
    </div>
  );
};

★는 별 아이콘의 HTML 엔티티 코드이지만 원하는 경우 여기에서 Font Awesome과 같은 아이콘 라이브러리를 사용할 수도 있습니다. 다음으로 클릭 시 별점을 설정하는 기능을 추가해야 합니다. 이를 위해 별을 <button> 및 onClick() 이벤트로 래핑합니다.

const StarRating = () => {
  const [rating, setRating] = useState(0);
  return (
    <div className="star-rating">
      {[...Array(5)].map((star, index) => {
        index += 1;
        return (
          <button
            type="button"
            key={index}
            className={index <= rating ? "on" : "off"}
            onClick={() => setRating(index)}
          >
            <span className="star">&#9733;</span>
          </button>
        );
      })}
    </div>
  );
};

클릭한 별의 값(인덱스)을 저장하기 위해 State hook을 사용하고 있습니다. 선택한 등급에 따라 "켜짐"또는 "꺼짐"클래스가 추가되어 아이콘의 스타일을 지정하여 선택한 등급을 시각적으로 나타낼 수 있습니다.

App.css 파일에 추가할 CSS는 다음과 같습니다.

button {
  background-color: transparent;
  border: none;
  outline: none;
  cursor: pointer;
}
.on {
  color: #000;
}
.off {
  color: #ccc;
}

CSS 설정을 사용하면 클릭 시 선택된 별점을 표시하는 작동하는 구성 요소가 있습니다. 일부 추가된 상호 작용을 위해 클릭 시 선택될 등급을 나타내는 호버 효과도 구현합니다.

const StarRating = () => {
  const [rating, setRating] = useState(0);
  const [hover, setHover] = useState(0);
  return (
    <div className="star-rating">
      {[...Array(5)].map((star, index) => {
        index += 1;
        return (
          <button
            type="button"
            key={index}
            className={index <= (hover || rating) ? "on" : "off"}
            onClick={() => setRating(index)}
            onMouseEnter={() => setHover(index)}
            onMouseLeave={() => setHover(rating)}
          >
            <span className="star">&#9733;</span>
          </button>
        );
      })}
    </div>
  );
};

추가 종속성이나 프레임워크가 필요 없는 사용자 지정 별 등급 구성 요소가 있습니다. 평소와 같이 이 프로젝트의 소스 코드는 GitHub에서 찾을 수 있습니다. 읽어 주셔서 감사합니다 :)