[Mukbang] 기능구현중 기록하기

toLocaleString이 먹히지 않을 때

데이터 형식이 object일 수 있다. 숫자로 변환 후 사용하자!

별점 리뷰 기능 구현

라이브러리 사용하지 않고 별점 기능 구현하기!!

• 별의 색을 바꾸는 게 아니라 아이콘 자체가 바뀌도록 하기!
• 아이콘이 바뀌면서 점수도 표기 되도록 하기!
• 0점으로 돌아갈 순 없다. ^-^

import styled from 'styled-components';
import React, { useState } from 'react';
import { BsStarFill, BsStar, BsStarHalf } from 'react-icons/bs';

const Modal = props => {
  const [starFilled, setStar] = useState([false, false, false, false, false]);

  const handleStarFill = index => {
    console.log('starFilled: ', starFilled);
    console.log('rating: ', rating);
    let click = [...starFilled];
    for (let i = 0; i < 5; i++) {
      i <= index ? (click[i] = true) : (click[i] = false);
    }
    setStar(click);
  };

  const rating = starFilled[4]
    ? 5.0
    : starFilled[3]
    ? 4.0
    : starFilled[2]
    ? 3.0
    : starFilled[1]
    ? 2.0
    : starFilled[0]
    ? 1.0
    : 0;

  return (
    <>
        <form>
          <Title>이 가게에 대한 평점을 남겨주세요.</Title>
          <Content>
            <>
              비추천
              <Rating>
                {starFilled.map((data, idx) =>
                  data ? (
                    <BsStarFill onClick={() => handleStarFill(idx)} />
                  ) : (
                    <BsStar onClick={() => handleStarFill(idx)} />
                  )
                )}
                <p>({rating}점)</p>
              </Rating>
              매우 추천
            </>
          </Content>

소수점 반올림 하기

toFixed(소수점 자리 수)
ex) 3.149254.toFixed(2) = 3.15

백엔드 쪽에서 데이터의 평균값을 보내주면서 지저분한 값을 처리해야 했다.
자바스크립트에서 Number 속성을 학습할 때, 정수로 반올림하는 방법만 알았었는데, 이번에 소수점 자리에서 반올림 하는 방법을 알 수 있었다.

Array(5).fill(false) === [false,false,false,false,false]

useState에 익숙해져가는 과정에서 state를 배열로 관리할 수 있다는 것을 알았고, idx값에 따라 boolean값을 주고 싶은 경우가 있었다.
배열의 값이 5개가 넘어가면서 useState[false,false,false,false,false,false] 라고 입력하는 내 자신이 너무 싫었는데, 나와 같은 방법으로 20개의 false를 입력한 적이 있다는 대희님이 이 방법을 알려줬다.

100개의 false도 쓸 수 있어 ^^