[React] 별점 기능 구현

원티드 프리온보딩 기업 과제 중에서 별점 기능 구현이 있어서 정리해 보았다.

아이콘 가져오기

이번 프로젝트에서는 react-icon 라이브러리를 사용했다.

import { ImStarFull } from "react-icons/im";

별점 체크를 위한 설정

별 5개 만점으로 Boolean값을 이용하여 로직을 구현했다. useState를 사용하면 모든 기본값을 false로 주었다. 그리고 별점 2일 경우 [true, true, false, false, false]가 되도록한했다.

// 별점 기본값 설정
const [clicked, setClicked] = useState([false, false, false, false, false]);

별점 체크 최종 설정

별 5개가 화면에 보여지도록 하기 위해 더미 배열(array)을 만들어서 map을 이용하여 돌린다. 그러면 클릭한 별의 index값이 el에 찍히게 된다. 가령 별점을 3점으로 줬다면el = index = 3가 된다.

 // 더미 배열을 통해 항상 별이 총 5개가 나오도록 한다.
const array = [0, 1, 2, 3, 4]

{array.map((el) => (
            <ImStarFull
              key={el}
              onClick={() => handleStarClick(el)}
              className={clicked[el] && 'black'}
              size="35"
            />))}

그리고 클릭한 별의 el값(3)을 handleStarClick 함수로 보내서 클릭된 별 만큼 true로 바뀌도록 한다. for문을 이용하여 el만큼 돌면서 false를 true로 변경한다.

const handleStarClick = index => {
  let clickStates = [...clicked];
  for (let i = 0; i < 5; i++) {
    clickStates[i] = i <= index ? true : false;
  }
   setClicked(clickStates);
 };

별점 내보내기

마지막으로 filter를 이용하여 true값만 뽑아서 length를 이용해 개수를 확인 후 별점값을 보낸다.

let score = clicked.filter(Boolean).length;

CSS 설정

기본 별점 색은 회색이고 마우스를 올리거나 선택이되면 검정색으로 바뀌도록 아래와 같이 CSS를 설정했다.

const RatingBox = styled.div`
  margin: 0 auto;

  & svg {
    color: #C4C4C4;
    cursor: pointer;
  }
  :hover svg {
    color: black;
  }
  & svg:hover ~ svg {
    color: #C4C4C4;
  }
  .black {
    color: black;
  }
`

참고 자료

https://velog.io/@whoyoung90/TIL-35-WECODE-%EB%B3%84%EC%A0%90-%EA%B8%B0%EB%8A%A5-%EA%B5%AC%ED%98%84