[React] 웹페이지에 간단하게 폭죽 효과 구현하기

안녕하세요 

 

오늘은 canvas-confetti 라이브러리 사용하여 간단하게 폭죽 효과를 구현해보도록 하겠습니다. 

아래는 라이브러리 깃허브 링크입니다. 

GitHub - catdad/canvas-confetti: 🎉 performant confetti animation in the browser

 

코드 한두줄만으로 폭죽 이벤트를 구현할 수 있으며

 canvas-confetti 라이브러리의 npm 주간 다운로드율은 92 k 로 활발하게 사용되고 있는 라이브러리 중 하나 입니다. 

 

 사용 예시

- 결제 완료, 회원 가입 축하

- 게임 (특정 점수 달성, 레벨 업) 

- 이벤트 페이지 (블랙 프라이데이, 해피 뉴이어 등) 

 

중요한 점은 짧고, 드물고, 눈길을 끌어야 하는 순간에만 사용하는 것입니다. 아무렇게나 효과를 남발하게 되면 

배터리, 메모리 부담이 높아지게 되니 주의하도록 합니다.

또한 사용 후에는 메모리 누수 방지를 위해 confetti.reset() 로 캔버스를 깔끔히 지워 주도록 합니다. 

 

 

 

1. 설치 

프로젝트 루트 페이지로 이동하여 콘솔 창에 아래 명령어를 실행해줍니다. 

npm i canvas-confetti

 

 

2. 함수 (boom) 추가 후, 사용하고자 하는 위치에 이벤트 적용하기 

 function boom() {
  confetti({ particleCount: 120, spread: 70, origin: { y: 0.6 } });
}

.
.
.
(중략) 
.
.

function Hero() {
  return (
    <section

<button onClick={boom} className="bg-indigo-600 ..." color="white">
        반가워요
      </button>

 

 

결과 화면 입니다