React 에서 리플 효과로 대화형 버튼 만들기

소개

이 랩에서는 React 를 사용하여 리플 효과 (ripple effect) 애니메이션이 있는 버튼을 만드는 방법을 배웁니다. 이 랩의 목적은 useState() 및 useEffect()와 같은 React 훅 (hook) 을 사용하여 버튼의 상태를 관리하고 애니메이션을 트리거하는 방법을 이해하도록 돕는 것입니다. 이 랩을 마치면 React 애플리케이션을 위한 인터랙티브하고 시각적으로 매력적인 버튼을 만들 수 있습니다.

리플 효과 (Ripple Effect) 가 있는 버튼

index.html 및 script.js는 이미 VM 에 제공되었습니다. 일반적으로 script.js 및 style.css에만 코드를 추가하면 됩니다.

이 코드는 클릭 시 리플 효과를 생성하는 버튼 컴포넌트를 렌더링합니다. 작동 방식은 다음과 같습니다.

useState() 훅 (hook) 은 coords와 isRippling의 두 가지 상태 변수를 생성하는 데 사용됩니다. coords 변수는 포인터의 좌표를 저장하고, isRippling은 버튼의 애니메이션 상태를 저장합니다.
useEffect() 훅은 coords 상태 변수가 변경될 때마다 isRippling의 값을 변경하는 데 사용됩니다. 이는 리플 효과의 애니메이션을 시작합니다.
setTimeout()은 이전 훅에서 애니메이션이 완료된 후 애니메이션을 지우는 데 사용됩니다.
다른 useEffect() 훅은 isRippling 상태 변수가 false일 때마다 coords를 재설정하는 데 사용됩니다.
onClick 이벤트는 coords 상태 변수를 업데이트하고 전달된 콜백 함수를 호출하여 처리됩니다.

다음은 RippleButton 컴포넌트의 코드입니다.

const RippleButton = ({ children, onClick }) => {
  const [coords, setCoords] = React.useState({ x: -1, y: -1 });
  const [isRippling, setIsRippling] = React.useState(false);

  React.useEffect(() => {
    if (coords.x !== -1 && coords.y !== -1) {
      setIsRippling(true);
      setTimeout(() => setIsRippling(false), 300);
    } else setIsRippling(false);
  }, [coords]);

  React.useEffect(() => {
    if (!isRippling) setCoords({ x: -1, y: -1 });
  }, [isRippling]);

  return (
    <button
      className="ripple-button"
      onClick={(e) => {
        const rect = e.target.getBoundingClientRect();
        setCoords({ x: e.clientX - rect.left, y: e.clientY - rect.top });
        onClick && onClick(e);
      }}
    >
      {isRippling && (
        <span
          className="ripple"
          style={{
            left: coords.x,
            top: coords.y
          }}
        />
      )}
      <span className="content">{children}</span>
    </button>
  );
};

이 컴포넌트는 다음과 같이 사용할 수 있습니다.

ReactDOM.createRoot(document.getElementById("root")).render(
  <RippleButton onClick={(e) => console.log(e)}>Click me</RippleButton>
);

다음은 RippleButton 컴포넌트의 CSS 입니다.

.ripple-button {
  border-radius: 4px;
  border: none;
  margin: 8px;
  padding: 14px 24px;
  background: #1976d2;
  color: #fff;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.ripple-button > .ripple {
  width: 20px;
  height: 20px;
  position: absolute;
  background: #63a4ff;
  display: block;
  content: "";
  border-radius: 9999px;
  opacity: 1;
  animation: 0.9s ease 1 forwards ripple-effect;
}

@keyframes ripple-effect {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(10);
    opacity: 0.375;
  }
  100% {
    transform: scale(35);
    opacity: 0;
  }
}

.ripple-button > .content {
  position: relative;
  z-index: 2;
}

오른쪽 하단의 'Go Live'를 클릭하여 포트 8080 에서 웹 서비스를 실행하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

요약

축하합니다! 리플 효과 (Ripple Effect) 가 있는 버튼 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.

리플 효과 버튼

소개

리플 효과 (Ripple Effect) 가 있는 버튼

요약