제목: 리액트에서 반만 보이는 SVG 아이콘 표시 및 사용자 상호작용 캡처하는 방법
소개
이 튜토리얼에서는 리액트 애플리케이션에서 반만 보이는 SVG 아이콘을 표시하고 사용자 상호작용을 캡처하는 기술을 알아볼 것입니다. 외부 라이브러리나 특정 아이콘 세트에 의존하지 않고 이 효과를 구현하는 방법에 대해 코드를 살펴보고 논의할 것입니다.
요구사항 이해하기
구현에 들어가기 전에요구사항을 명확히 해봅시다. 반 별점을 허용하는 평가 시스템을 구축하려고 합니다. FontAwesome의 Half Stars와 같은 미리 디자인된 반 별점 아이콘 대신 사용자가 원하는 어떤 SVG 아이콘을 선택할 수 있고 필요한 경우 각 아이콘의 반만 표시되는 유연한 솔루션을 만들 것입니다.
해결책 만들기
이 기능을 구현하기 위해 리액트의 useState 훅을 사용하여 사용자 평가를 처리하고 마우스 오버 상태를 추적합니다. 또한 사용자의 상호작용에 따라 아이콘을 적절하게 스타일링하기위해 CSS를 활용할 것입니다.
import React, { useState } from 'react';
import './styles/Rater.css';
const Rater = ({ iconCount }) => {
const [rating, setRating] = useState(null);
const [hover, setHover] = useState(null);
const handleRating = (value) => {
console.log('value => ', value);
setRating(value);
};
return (
<div>
{[...Array(iconCount)].map((_, i) => {
const value = (i + 1) / 2;
const isActive = value <= (hover || rating);
return (
<label key={i}>
<input
type="radio"
name="rating"
value={value}
onClick={() => handleRating(value)}
/>
<div className={`star-container ${isActive ? 'active' : ''}`}>
<div>
{/* 아래 <svg> 코드를 선택한 SVG 아이콘으로 대체하세요 */}
<svg viewBox="0 0 24 24">
{/* 아이콘을 나타내는 SVG 경로 */}
</svg>
</div>
</div>
</label>
);
})}
</div>
);
};
export default Rater;코드를 자세히 살펴보겠습니다:
1. useState 훅
useState는 함수형 컴포넌트에서 상태를 관리하기 위해 사용되는 리액트 훅입니다. 우리는 두 가지 상태를 사용하고 있습니다: 사용자의 평가를 저장하기 위한 rating과 현재 마우스 오버 값 추적을 위한 hover.
2. 아이콘 렌더링
Rater 컴포넌트 내에서 iconCount 속성에 따라 일련의 아이콘을 렌더링합니다. 각각의 아이콘에 대해 값을 계산하고 hover 또는 rating에 대해 작동 여부를 결정합니다.
3. 사용자 상호작용 처리
사용자가 아이콘을 클릭하면 handleRating 함수를 트리거하여 평가 상태를 업데이트합니다. 이 함수는 선택한 값을 콘솔에 기록합니다.
CSS 구현하기
반만 보이는 SVG 아이콘을 표시하기 위해 clip-path 및 width와 같은 CSS 속성을 활용할 수 있습니다. 정확한 구현은 선택한 SVG 아이콘 및 원하는 시각적 효과에 따라 다릅니다.
.star-container {
/* 여기에 원하는 컨테이너 스타일을 추가하세요 */
}
.star-container.active {
/* 여기에 활성화된 별 스타일을 추가하세요 */
}
.star-container.active svg {
/* SVG 아이콘의 반만 표시하기 위한 스타일을 추가하세요 */
}결론
축하합니다! 사용자 상호작용에 따라 반만 보이는 SVG 아이콘을 표시할 수 있는 평가 시스템을 성공적으로 구현했습니다. React의 useState 훅과 CSS를 활용하여 유연하고 사용자 정의 가능한 솔루션을 만들었습니다. 이 기능을 더 확장하여 필요에 맞게 사용하세요.
플레이스홀더 코드를 선택한 SVG 아이콘으로 대체하고 원하는 시각적인 효과를 위해 CSS를 사용자 정의하세요. 즐거운 코딩 되세요!
