별점찍는 함수 리팩토링

입사 후 첫 프로젝트를 진행하면서 typescript에 익숙하지 않아서 JS로 개발했던 내용을 TS로 마이그레이션 하면서

그간의 행적(?)을 다시 한번 보며 리팩터링을 진행했다.

소수점 숫자를 받아 0.5점 단위로 내림하여 별점을 찍어주는 함수를 개선한 내용

리팩토링 전

starCount는 0.5 단위로 내림 처리한 숫자

2를 곱하고 내림처리를 하고 2로 다시 나눠주면 0.5점 단위로 내림

scoreStarPrint함수는 별 svg 컴포넌트를 리턴하는 함수, 별을 count만큼 리턴하기 위해 for문을 돌면서

1부터 count까지 배열에 넣고 그 배열을 map 돌면서 별을 반복해서 보여줌

근데 starCount가 정수가 아닐때는 emptyStarCount가 하나 적어야 하므로 If문으로 starCount의 정수 여부에 따라

조건문을 나눠서 리턴했다. 왜냐하면 반쪽짜리 별<HalfFilledStar /> 이 하나 들어가기 때문이다.

그래서 이걸 기본으로 띄워놓고.. emptyStarCount를 내림 처리한다!(겁나 어렵게 했다)

예를 들면 startCount가 3이면 [1,2,3]이라는 배열을 만들어서 map을 돌린다.

리팩토링 후

startCount는 동일하고

emptyStarCount를 전역에 만들었다.

정수 여부와 상관없는 코드를 만들어서 불필요한 조건문을 지웠기 때문에 전역에서 가져다 써도 된다.

<HalfFilledStar />는 정수 여부에 따라 렌더링 되도록 &&연산자를 이용했다.

그리고 사실 [1,2,3]이라는 배열을 만드는 이유가 배열의 요소가 필요해서가 아니라 단지 숫자만큼 반복하기 위함이므로

숫자만 가지고 반복할 수 있는 방법을 찾아보려고 했다.

새로운 배열을 만들어주고 Array생성자 함수를 가져와서 length만 가지고있는 배열을 만들었다.

3이란 정수를 전달해주면 [undefined, undefined, undefined] 이런 배열을 만들어주는 생성자함수

어차피 내용물은 필요 없으니 이렇게 만든 배열을 map 돌리고 key는 Index로 넣어준다.