[React][유용한 툴] 간단하게 빵빠레, 폭죽 효과 추가하기

# React에서 폭죽, 빵빠레 효과를 쉽게 추가하는 방법

- React 프론트엔드를 개발하다보면, 사용자가 특정 목표를 완료했을 경우나, 좋은 일이 발생했을 때 이를 강조하기 위해 폭죽이나 빵빠레 효과가 필요한 경우가 있습니다. 정말 자주 필요하지는 않지만, 막상 필요할 때 직접 구현하기는 손이 많이 가는 기능입니다. 본 포스팅에서는 이런 경우 유용하게 사용할 수 있는 라이브러리를 소개하려고 합니다.

 

# 라이브러리 및 사용 방법

- 검토 및 사용해본 라이브러리는 4개 정도 되는데, 전체적으로 지원하는 기능은 유사했습니다. 추천 드리는 라이브러리는 폭죽이 터지는 효과면 충분하고 상대적으로 최신까지 유지보수가 되는 라이브러리를 선호한다면, react-confetti-explosion를 추천드리고, 터지는 효과 보다는 파라미터를 더 컨트롤 하고 싶다면, react-confetti를 추천 드립니다. 그리고 react가 아닌 경우에는 canvas-confetti를 사용하시면 될 것 같습니다. 설치 방법 및 사용법은 워낙 간단하기에 한 번에 정리하려고 합니다. 각각의 라이브러리의 상세 파라미터들은 아래의 링크를 확인해 보시면 될 것 같습니다

• react-confetti-explosion
• react-confetti
• canvas-confetti

- 설치 방법

# 설치
yarn add react-confetti-explosion
yarn add react-confetti
yarn add canvas-confetti

- 사용법

// react-confetti-explosion
import ConfettiExplosion from 'react-confetti-explosion';

function App() {
  const [isExploding, setIsExploding] = React.useState(false);
  return <>{isExploding && <ConfettiExplosion />}</>;
}
//

// react-confetti
// 예시에서는 표시될 영역을 지정하기 위해 useWindowSize를 사용

import React from 'react'
import useWindowSize from 'react-use/lib/useWindowSize'
import Confetti from 'react-confetti'

export default () => {
  const { width, height } = useWindowSize()
  return (
    <Confetti
      width={width}
      height={height}
    />
  )
}

// canvas-confetti

var myCanvas = document.createElement('canvas');
document.body.appendChild(myCanvas);

var myConfetti = confetti.create(myCanvas, {
  resize: true,
  useWorker: true
});
myConfetti({
  particleCount: 100,
  spread: 160
  // any other options from the global
  // confetti function
});

---