라이브러리 없이 별점 구현

1. 내가 처음 구현한 코드

• 마우스 hover 했을 때 별 색깔 바뀌도록 구현

 const starArr = [1, 2, 3, 4, 5];
 const [hover, setHover] = useState(0);
 const [starNum, setStarNum] = useState(0);

 return (
   <s.Star>
    {starArr.map(idx => {
     return (
       <FontAwesomeIcon
          key={idx}
          icon={faStar}
 		  // 클릭시 starNum이 지정되므로 starNum === 0 이라는 말은 아직 클릭을 하지 않았다는 뜻. 
          // 그러므로 hover시 setHover가 지정됨
          onClick={() => setStarNum(idx)}
          onMouseEnter={() => starNum === 0 ? setHover(idx) : null }   
          onMouseLeave={() => { setHover(0) }}
          style={
            idx <= (hover || starNum)
                 ? { color: '#fa722d' }
                 : { color: '#dadfe3' }
            }
         />
        );
      })}
   </s.Star>
 )

• 들어오는 데이터(숫자)에 따라 별점 생성하는 방법

// 부모 컴포넌트
 <RatingStar starNum={review.star} />
  
  
// 자식 컴포넌트  
  const RatingStar = ({ starNum }) => {
  const rating = starNum;
  const ratingArr = new Array(5).fill(1);   // [1, 1, 1, 1, 1]

  return (
    <span>
      {ratingArr.map((num, idx) => {
        return (
          <FontAwesomeIcon
            key={idx}
            icon={faStar}
            style={
              num + idx <= rating ? { color: '#fa722d' } : { color: '#dadfe3' }
            }
          />
        );
      })}
    </span>
  );
};

export default RatingStar;

2. 리뷰 받은 코드

• 위의 두 가지 기능을 하나의 컴포넌트로 관리하는 방법 ➡️ 이벤트가 필요한 부분에만 특정 type을 부여해 조건부 랜더링 가능하도록 변경

const RatingStar = ({ starNum, setStarNum, setHover, type }) => { 
  const ratingArr = new Array(5).fill(1);
  
  const clickRatingNum = num => {
    type === 'select' && setStarNum(num);
  };
  const hoverRating = num => {
    type === 'select' && setHover(num);
  };
  
  return (
    <span>
      {ratingArr.map((num, idx) => {
        return (
          <FontAwesomeIcon
            key={idx}
            icon={faStar}
            style={
              num + idx <= rating ? { color: '#fa722d' } : { color: '#dadfe3' }
            }
			
			// type = 'select' 일 경우에만 이벤트가 실행된다.
            onClick={() => clickRatingNum(num + idx)}
            onMouseEnter={() => hoverRating(num + idx)}
            onMouseLeave={() => hoverRating(0)}
          />
        );
      })}
    </span>
  );
};