[React] 별점 컴포넌트 만들기

메인 - 별점 컴포넌트 사용 사례 1

상세 페이지 - 별점 컴포넌트 사용 사례 2

 

마크업 하면서 제작해둔 컴포넌트였는데..... 데이터 넣으면서 리팩토링했다. 만드는 순서는

1. 별 한개를 만든다.

2. item의 별점을 props로 받는 별의 리스트를 만든다.

 

• 별 한개 만들기

import { useState } from 'react';

function Star({ selected = false }) {
    return (
        <>
        {selected ? (<i className="ic-star is-active"></i>) : (<i className="ic-star"></i>)}
        </>
    )
};

export default Star;

Start 컴포넌트의 기본값으로 들어가는 props는 false다. 별 모양의 아이콘 폰트를 2가지의 경우로 만들고(선택했을 때 / 선택하지 않았을 때) 들어오는 props가 true일 경우에 선택했을 경우의 UI를 노출한다.

 

 

• 아이템의 별점을 props로 받는 별의 리스트

import { useState } from 'react';
import Star from './star';

function rating({total = 5, rating}) {
    const [ selectedStar, selectedStars ] = useState(rating);
    const createArray = length => [...Array(length)];
    ...

 

해당 컴포넌트의 props는 리스트에 담을 별의 갯수(total, default 값은 5로 지정), 아이템의 별점 데이터(rating)이다. 별점 데이터를 state로 받아 처리하였고 createArray라는 변수를 선언하여 배열의 길이를 지정하여 제작할 수 있는 함수를 만들었다. 

 

    return (
        <>
        <div className="star-rating-13">
                 { createArray(total).map((n,i) => <Star key={i} selected={ selectedStar > i })}
        </div>
        </>
    )
};

export default rating;

 

랜더 코드에서는 만든 함수를 사용하여 map을 돌렸다. i는 0,1,2,3,4.. 이렇게 생성되고 별점값이 생성된 i보다 클 경우 true를 리턴한다. 별점 데이터를 3로 받을 경우 i가 0일 때 true, 1일 때 true, 2일때 true, 3일 때 false, 4일 때 false로 처리되어 아래와 같이 보이게 된다.

 

별점 3

 

[출처] <러닝 리액트>를 참고하였습니다.