[react] star-rating 구현하기(feat. typescript)

후기의 핵심.. 별점 매기기 기능을 구현해보도록 하자.

이것도 라이브러리가 몇 개 있었는데, 타스에서 적용이 안된다는 이야기가 많아 자스로 구현된 예시 몇개를 보고 리팩토링을 하는 방식으로 진행하였다!

 

먼저 별점 매기기 기능의 꽃! 별 아이콘을 가져오자.

나는 클릭 여부에 따라 커스텀을 해야하기 때문에 mui 아이콘을 그냥 사용하지 않고 컴포넌트로 만든 뒤 svg 형식으로 가져와 사용했다.

하단 코드는 공식 홈페이지를 참고하였다.

import SvgIcon from "@mui/material/SvgIcon";

interface IProps {
  key: number;
  size: string;
  onClick: () => void;
  className: string;
}

const StarRate = (props: IProps) => {
  return (
    <SvgIcon {...props}>
      <path d="M14.43 10 12 2l-2.43 8H2l6.18 4.41L5.83 22 12 17.31 18.18 22l-2.35-7.59L22 10z" />
    </SvgIcon>
  );
};

export default StarRate;

https://mui.com/material-ui/icons/

React Icon Component - Material UI

 

별점 클릭 여부를 저장해줄 기본 array와 클릭된 별의 순번을 파악하기 위한 더미 array를 만들어준다.

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

  // 항상 별이 총 5개(더미 array)
  const array: Array<number> = [0, 1, 2, 3, 4];

그 다음, 별점을 저장해주는 함수를 만들어준다.

  /**
   * 클릭한 별의 순서까지를 별점의 총점으로 저장해주는 함수
   * @param index 클릭한 별의 순서
   */
  const handleStarClick = (index: number) => {
    const clickStates = [...clicked];
    clickStates.map((el, i) => {
      i <= index ? true : false;
    });
    setClicked(clickStates);
  };

마지막으로 return문 안에 아까 만들어준 별 모양 커스텀 컴포넌트를 가져와 map 함수를 통해 뿌려주면 된다.

각 별이 클릭될 때마다 해당 별을 포함한 앞 순서의 별까지 모두 클릭 된 것으로 처리되며, 모두 노란색으로 변한다!

<StyledStar>
    {array.map((el, idx) => {
           return (
              <StarRate
                  key={idx}
                  size="50"
                  onClick={() => handleStarClick(el)}
                  className={clicked[el] ? "yellow" : ""}
               />
           );
    })}
</StyledStar>

완성!

 

참고 링크

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

[TIL #35 WECODE] 별점 기능 구현