반응형
리뷰를 입력했을 때, 평균 평점을 계산해야했는데 평균을 계산하는 순간 딱 맞아 떨어질 때도 있지만 소수점이 많이 늘어나는 경우도 있었다. 그래서 그걸 방지하기 위해 toFixed 함수를 사용했고 정말 간단한 예제를 만들어봤다.
각각의 input에 값을 입력하면 자동으로 평균이 계산되도록 만들어놓은 것이다. 기존에 백엔드에서 넘겨 받는 데이터라면 데이터 값을 추출하기 위해 map을 돌려 계산해야하는 값을 새로운 배열로 만든 후, reduce 함수를 이용하여 총합을 구한다. 총합을 구한 후, 배열의 길이만큼으로 나눠주면 평균 계산 완료.
지금은 백엔드에서 받고 있는 데이터가 없기 때문에 직접 입력해서 값을 추출하도록 만들었다.
import React, { useState } from 'react'
const Average = () => {
const list = [];
const [num1, setNum1] = useState(0)
const [num2, setNum2] = useState(0)
const [num3, setNum3] = useState(0)
// 평균 구하기
// const score = num1 + num2 + num3
list.push(num1)
list.push(num2)
list.push(num3)
const score = list?.map((item) => Number(item));
const result = score.reduce(function add(sum, currValue) {
return sum + currValue;
}, 0)
// 평균값에 toFixed를 사용하여 소수점 첫째자리까지 나타내는 것
const average = (result / score.length).toFixed(1);
return (
<div>
<input type='number' onChange={(e) => setNum1(e.target.value)} />
<input type='number' onChange={(e) => setNum2(e.target.value)} />
<input type='number' onChange={(e) => setNum3(e.target.value)} />
<div>
<h1>{average}점</h1>
</div>
</div>
)
}
export default Average
toFixed에 원하는 자릿수만큼의 숫자를 넣어주면 되는데 아래와 같이 넣으면 된다.
const average = (result / score.length).toFixed(1); // 소수점 첫째자리
const average = (result / score.length).toFixed(2); // 소수점 둘째자리
const average = (result / score.length).toFixed(3); // 소수점 셋째자리반응형
