소개

React를 사용하고 별 등급을 구현할 기회가 있었으므로 비망록으로 적습니다.
덧붙여서 이번은 패키지를 일절 사용하고 있지 않기 때문에, 패키지를 사용해 보다 세련된 레이팅을 만들고 싶은 분은 구구라고 봐 주세요.

npm 패키지

react-star-ratings - npm

react-star-rating-component - npm

완성형

※이것보다 세련된 레이팅을 구현하고 싶은 분은 패키지등의 컴퍼넌트를 구구 해 보세요.

만드는 방법

만드는 방법은 대충 말하면 이런 느낌입니다.

State에서 빛나는 별의 수를 관리합니다

각 별을 부울 (true 또는 false)로 빛나게 할 것인지 결정합니다.

state를 참조하면서 boolean이 들어있는 배열을 만든다 (별의 수가 Max로 5개라면 만드는 배열의 요소는 5개)

「3」으로 만든 배열을 루프시켜 JSX 요소(이번은 별)를 꺼낸다. 그런 다음 배열의 색인 번호를 추출한 요소로 나눕니다

onClick 메소드에서 핸들러 (함수)를 적용하고 인수로 나눈 인덱스 번호를 받습니다.

핸들러 (함수)로 상태 업데이트

코드로 보자.

import React, { useState } from 'react';

export const StarRating: React.FC<> = () => { 
  const [ratingState, setRatingState] = useState<number>(0);
  const stars: boolean[] = [];
  for (let i = 0; i > 5; i++) {
    if( i < ratingState ) {
      stars.push(true);
    } else {
      stars.push(false);
    }
  }
  const HandleStarShine = (rating) => {
    setRatingState( rating + 1 );  // index番号は0~4だから星の数に合わせて1~5にする
  };
  return (
    {stars.map((val: boolean, index: number) => {
      return (
        <button onClick={() => HandleStarShine(index)} >
          {val ? <img src="光る星マーク" /> : <img src="光ってない星マーク"/>
        </button>
　　　　);
    })}
  );
};

이런 느낌입니다.
코드에 있는 것처럼 state는 눌린 버튼(별)이 가지고 있는 index 번호의 값으로 갱신됩니다.

요약

글쎄,이 기사의 별 등급은 얼마입니까?
또, 지적 등도 있으면 코멘트를 잘 부탁드립니다.
최근 React를 공부하기 시작했기 때문에, 핸들러에 인수를 건네주는 것이 개인적으로 어려웠습니다만, 지금 생각하면 React의 튜토리얼 웃음) 공부할 뿐입니다 (웃음)