[DAY62]TIL

별점매기기

  // 별점
  const [clicked, setClicked] = useState<boolean[]>([
    false,
    false,
    false,
    false,
    false,
  ]);

먼저 클릭된 별들의 상태를 만들어주기 위해 useState를 사용한다.

  const starArray: number[] = [1, 2, 3, 4, 5];

그다음 map을 돌려줄 별점의 배열을 만들어주는데, 편의상 그냥 바로 [1,2,3,4,5]를 map 돌려도 된다.

  {starArray.map((score) => (
                <Star
                  key={score}
                  size="30"
                  color={clicked[score - 1] ? "#FFDC82" : "#E5DFD3"}
                  onClick={() => changeStarHandler(score)}
                />
              ))}

이렇게 xtml 코드를 작성해준다.

  const clickStarHandler = (index: number) => {
    setClicked(clicked.map((_, i) => i <= index - 1));
    scoreStarHandler(index);
  };

  const changeStarHandler = (score: number) => {
    clickStarHandler(score);
    setValidStar(true);
  };

클릭된 별의 색깔을 바꿔주고, 그 점수를 입력해주는 함수를 만들어준다.

알게된 점

map 돌릴때, 첫번째 칸을 _ 로 비워주면, index값을 기준으로 맵을 돌릴 수 있어짐. 즉, for문을 돌리는 것처럼 map을 사용할 수 있어진다.
이걸 몰라서 for문을 돌릴지 굉장히 고민했는데, 왠지 오기로 map을 돌리고 싶어서 이거저거 해보다가 발견함 !