Array.from 이용해서 새로운 배열로 별점 생성하기

삼항연산자로 후기가 없을 경우 처리하기

이번 포스팅에서는 유저에게 이미 적힌 리뷰들을 볼 수 있는 리뷰 리스트를 구현해보도록 하자. 먼저 후기가 하나도 없는 유저라면 배열로 오는 데이터의 길이가 0일 것이기 때문에 그에 해당하면 후기가 없다는 것을 삼항연산자를 통해 보여주었다.

{reviewData.length === 0 ? (
   <Style.PaddingTop>아직 후기가 없습니다.</Style.PaddingTop>
   ) : ( 후기 있는 경우 ) }

 

new Array로 숫자를 별점 아이콘으로 만들기

후기가 있는 경우 백엔드에게 받아오는 후기의 평점는 양의 정수였는데 이 데이터를 별 아이콘으로 보여지도록 가공해야했다. 방법을 찾는 중에 멘토님께서 new Array()라는 것을 알려주셨고, new Array(숫자)를 넣어주면 숫자만큼의 길이를 가진 배열을 생성할 수 있었다. 그래서 숫자에 백엔드에게 받아오는 후기의 평점인 양의 정수를 넣어주었다.

하지만 요소의 값은 입력해주지 않고 길이만 정해주다보니 요소가 undefined인 배열이 생성되었다. 그 결과로 요소가 undefined였기 때문에 map을 이용하더라도 위 사진 처럼 별 아이콘이 그려지지가 않았다.

 

Array.from 으로 숫자를 별점 아이콘으로 만들기

그래서 다른 방법을 찾았고 그게 Array.from 이다. 첫번째 매개변수로 {length : 원하는길이} 를 가진 객체를, 두번째 매개변수로는 원하는 값을 반환하는 콜백함수를 넣어주면 두번째 매개변수에 입력한 값을가지면서 원하는길이의 배열이 만들어진다. Array.from을 이용해 받아오는 리뷰의 평점을 length에 넣어주고 콜백함수에 0을 넣어주면 0이라는 값을 평점만큼 가진 배열이 만들어지고 그 배열로 map을 이용해 아이콘을 생성해주면 된다. 그러면 오른쪽 사진 처럼 별이 length 객체에 적어준 숫자만큼 생겨난다.

 

요즘 리팩토링을 진행하고 있는데 커스텀훅으로 뺀 만큼 더더욱 접근성과 재사용성을 높이고 싶어서 Array.from을 이용한 부분도 custom hook으로 빼주었다. 원래는 map 위에서 선언되었던 변수들이 custom hook으로 빼고 나니 좀 더 간단하게 보이면서 함수의 인자로 rating을 넘겨주어 가독성도 올라간 것 같다. 앞으로도 리팩토링을 통해 프로젝트의 퀄리티를 높여봐야겠다.