반응형
후기의 핵심.. 별점 매기기 기능을 구현해보도록 하자.
이것도 라이브러리가 몇 개 있었는데, 타스에서 적용이 안된다는 이야기가 많아 자스로 구현된 예시 몇개를 보고 리팩토링을 하는 방식으로 진행하였다!
먼저 별점 매기기 기능의 꽃! 별 아이콘을 가져오자.
나는 클릭 여부에 따라 커스텀을 해야하기 때문에 mui 아이콘을 그냥 사용하지 않고 컴포넌트로 만든 뒤 svg 형식으로 가져와 사용했다.
하단 코드는 공식 홈페이지를 참고하였다.
import SvgIcon from "@mui/material/SvgIcon";
interface IProps {
key: number;
size: string;
onClick: () => void;
className: string;
}
const StarRate = (props: IProps) => {
return (
<SvgIcon {...props}>
<path d="M14.43 10 12 2l-2.43 8H2l6.18 4.41L5.83 22 12 17.31 18.18 22l-2.35-7.59L22 10z" />
</SvgIcon>
);
};
export default StarRate;
https://mui.com/material-ui/icons/
별점 클릭 여부를 저장해줄 기본 array와 클릭된 별의 순번을 파악하기 위한 더미 array를 만들어준다.
// 별점 기본값 설정
const [clicked, setClicked] = useState<boolean[]>([
false,
false,
false,
false,
false,
]);
// 항상 별이 총 5개(더미 array)
const array: Array<number> = [0, 1, 2, 3, 4];
그 다음, 별점을 저장해주는 함수를 만들어준다.
/**
* 클릭한 별의 순서까지를 별점의 총점으로 저장해주는 함수
* @param index 클릭한 별의 순서
*/
const handleStarClick = (index: number) => {
const clickStates = [...clicked];
clickStates.map((el, i) => {
i <= index ? true : false;
});
setClicked(clickStates);
};
마지막으로 return문 안에 아까 만들어준 별 모양 커스텀 컴포넌트를 가져와 map 함수를 통해 뿌려주면 된다.
각 별이 클릭될 때마다 해당 별을 포함한 앞 순서의 별까지 모두 클릭 된 것으로 처리되며, 모두 노란색으로 변한다!
<StyledStar>
{array.map((el, idx) => {
return (
<StarRate
key={idx}
size="50"
onClick={() => handleStarClick(el)}
className={clicked[el] ? "yellow" : ""}
/>
);
})}
</StyledStar>
참고 링크
https://velog.io/@whoyoung90/TIL-35-WECODE-%EB%B3%84%EC%A0%90-%EA%B8%B0%EB%8A%A5-%EA%B5%AC%ED%98%84
반응형
'코드스테이츠 SEB FE 41기 > Main-Project(MatP)' 카테고리의 다른 글
[react] useAxios 커스텀 훅 사용기1(feat. typescript) (0) | 2023.01.22 |
---|---|
[react] 이미지 hover시 이미지 짙어지며 텍스트 뜨게 만들기 (0) | 2023.01.22 |
[react] 텍스트 에디터 react-quill 사용기 (feat. typescript) (0) | 2023.01.16 |
[react]Modal Portal(feat. typescript) (0) | 2023.01.16 |
[react] z-index, position, map reverse, axios (feat. typescript) (1) | 2023.01.11 |