[React] 🎉 색종이 조각 날림 효과 (feat. Canvas-Confetti)

🎉 색종이 조각 날림 효과 구현하기

이력서 지원을 하다보면 제출 할 때 색종이 조각이 폭죽처럼 터지는 효과가 생기는 걸 볼 수 있다. 이것을 보고 궁금해서 만들어 보게 되었다.

Github 뒤적뒤적 하면서 찾아보다가 2개를 발견했다.

• react-canvas-confetti
• js-confetti

1. react-canvas-confetti

설치 방법

npm i react-canvas-confetti

사용 방법

대부분의 매개변수가 canvas-confetti 인터페이스 이므로 이 모듈을 사용하기 전에 먼저 canvas-confetti 라이브러리 에 익숙해지는 것이 좋다고 한다.

깃허브에 예제가 잘 나와있고, 설명도 잘되어있어 쉽게 구현할 수 있었다.
예제를 살펴보니 총 4가지 효과가 있었다.

• SchoolPride
• Frieworks
• Snow
• Realistic

제일 처음 일단 효과를 보여주기 위한 Canvas 컴포넌트를 생성해 준다.

// ReactCanvasConfetti.tsx

import canvasConfetti, {
  CreateTypes,
  GlobalOptions,
  Options,
} from "canvas-confetti";
import { Component, createRef, CSSProperties, RefObject } from "react";

export interface IProps extends Options, GlobalOptions {
  fire?: any;
  reset?: any;
  width?: string | number;
  height?: string | number;
  className?: string;
  style?: CSSProperties;
  refConfetti?: (confetti: CreateTypes | null) => void;
  onDecay?: () => void;
  onFire?: () => void;
  onReset?: () => void;
}

export default class ReactCanvasConfetti extends Component<IProps> {
  private refCanvas: RefObject<HTMLCanvasElement>;

  private confetti: CreateTypes | null;

  constructor(props: IProps) {
    super(props);
    this.refCanvas = createRef();
    this.confetti = null;
  }

  componentDidMount() {
    if (!this.refCanvas.current) {
      return;
    }

    const { resize, useWorker } = this.props;
    const globalOptions: GlobalOptions = {
      resize: typeof resize === "undefined" ? true : resize,
      useWorker: typeof useWorker === "undefined" ? true : useWorker,
    };

    this.confetti = canvasConfetti.create(
      this.refCanvas.current,
      globalOptions
    );
    this.setRefConfetti();
  }

  componentDidUpdate(prevProps: Readonly<IProps>) {
    const { fire, reset } = this.props;
    const isFireTrue = !!fire;
    const isFireChanged = fire !== prevProps.fire;

    if (isFireTrue && isFireChanged) {
      this.fireConfetti();
    }

    const isResetTrue = !!reset;
    const isResetChanged = reset !== prevProps.reset;

    if (isResetTrue && isResetChanged) {
      this.resetConfetti();
    }
  }

  componentWillUnmount() {
    this.unsetRefConfetti();
  }

  private setRefConfetti() {
    const { refConfetti } = this.props;

    refConfetti && refConfetti(this.confetti);
  }

  private unsetRefConfetti() {
    const { refConfetti } = this.props;

    refConfetti && refConfetti(null);
  }

  private fireConfetti() {
    if (!this.confetti) {
      return;
    }

    const {
      onFire,
      onDecay,
      onReset,
      className,
      style,
      width,
      height,
      refConfetti,
      fire,
      reset,
      ...confettiProps
    } = this.props;

    onFire && onFire();

    const promise = this.confetti(confettiProps);

    promise &&
      promise.then(() => {
        onDecay && onDecay();
      });
  }

  private resetConfetti() {
    if (!this.confetti) {
      return;
    }

    this.confetti.reset();

    const { onReset } = this.props;

    onReset && onReset();
  }

  render() {
    const { style, className, width, height } = this.props;
    return (
      <canvas
        ref={this.refCanvas}
        style={style}
        className={className}
        width={width}
        height={height}
      />
    );
  }
}

GlobalStyle 에 Canvas의 크기를 설정해 준다.

.canvas {
  height: 100vh;
  left: 0px;
  pointer-events: none;
  position: fixed;
  top: 0px;
  width: 100vw;
}

그 다음 이제 효과를 넣어보자. Canvas-confetti 에는 설정할 수 있는 많은 옵션들이 있다.

Canvas-confetti props (more details)

• particleCount: number (default: 50) - 발사 할 색종이의 수.
• angle: number (default: 90) - 색종이 조각을 발사하는 각도.
• spread: number (default: 45) - 색종이 조각이 중앙에서 얼마나 멀리 갈 수 있는지.(도 단위)
• startVelocity: number (default: 45) - 색종이 조각이 얼마나 빨리 시작되는지 픽셀 단위로 표시.
• decay: number (default: 0.9) - 색종이 조각이 얼마나 빨리 속도를 잃을지.(안바꾸는게 좋다고 한다.)
• gravity: number (default: 1) - 입자가 얼마나 빨리 당겨지는지. 1은 전체 중력, 0.5는 절반 중력, 등이 있지만 제한은 없다. 원하는 경우 입자를 위로 올릴 수도 있다.
• drift: number (default: 0) - 색종이 조각이 옆으로 얼마나 흘러가는지를 설정. 왼쪽에는 음수를, 오른쪽에는 양수를 사용.
• ticks: number (default: 200) - 색종이 조각이 몇 번이나 움직일지.
• origin: { x: number, y: number } - 색종이 발사를 시작할 위치. 원하는 경우 화면 밖에서 실행해도 된다.
• origin.x: number (default: 0.5) - 페이지의 x 위치, 0은 왼쪽 가장자리이고 1은 오른쪽 가장자리이다.
• origin.y: number (default: 0.5) - 페이지의 y 위치. 0은 위쪽 가장자리이고 1은 아래쪽 가장자리이다.
• colors: Array<String> - HEX 형식의 색상 문자열 배열.
• shapes: Array<String> - 색종이 모양의 배열. 가능한 값은 정사각형과 원. 기본값은
  균일한 혼합에서 두 모양을 모두 사용한다. 다음과 같은 값을 제공하여 믹스를 변경할 수도 있습니다.
  ['circle', 'circle', 'square']와 같이 2/3 원과 1/3 정사각형을 사용한다.
• scalar: number (default: 1) - 각 색종이 입자에 대한 크기. 색종이 조각을 작게 만들려면 소수점을 사용.
• zIndex: number (default: 100) - 결국 색종이가 맨 위에 있어야한다. 하지만 엄청나게 높은 페이지가 있다면 더 높게 설정.
• resize: boolean (default: true) - 캔버스 이미지 크기 설정을 허용하고 올바른 크기를 유지할지 여부. 창 크기가 변경된 경우(예: 창 크기 조정, 모바일 장치 회전 등). 기본적으로 캔버스 크기는 수정할 수 없다.

이제 색종이 날림 효과 컴포넌트를 만들어 준다.

// Realistic.tsx

import { faFire } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { CreateTypes } from "canvas-confetti";
import { Component } from "react";
import { Icon } from "../../header/Mode";
import ReactCanvasConfetti from "../ReactCanvasConfetti";

export default class Realistic extends Component {
  private isAnimationEnabled: boolean;
  private animationInstance: CreateTypes | null = null;

  constructor(props: {}) {
    super(props);
    this.isAnimationEnabled = false;
    this.fire = this.fire.bind(this);
  }

  makeShot(particleRatio: number, opts: object) {
    this.animationInstance &&
      this.animationInstance({
        ...opts,
        origin: { y: 0.8 },
        particleCount: Math.floor(200 * particleRatio),
      });
  }

  // 이 부분에서 사용하고 싶은 설정을 하면 된다.
  fire() {
    this.makeShot(0.25, {
      spread: 25,
      startVelocity: 55,
    });
  }

  handlerFire = () => {
    if (!this.isAnimationEnabled) {
      this.isAnimationEnabled = true;
    }
    requestAnimationFrame(this.fire);
    this.fire();
  };

  getInstance = (instance: CreateTypes | null) => {
    this.animationInstance = instance;
  };

  render() {
    return (
      <>
        <Icon mode="fire" onClick={this.handlerFire}>
          <FontAwesomeIcon icon={faFire} />
        </Icon>
        <ReactCanvasConfetti
          refConfetti={this.getInstance}
          className="canvas"
        />
      </>
    );
  }
}

위 컴포넌트를 화면에 불러오면 된다. 버튼 클릭시 아래와 같이 구현이 된다.

makeShot을 여러개 만들어 주어서 폭죽이 터지는 것처럼 만들어 보자.
위 코드에서 fire() 부분에 makeShot을 더 추가하고 설정을 각각 다르게 바꾸어 주면된다.

fire() {
    this.makeShot(0.25, {
      spread: 26,
      startVelocity: 55,
    });

    this.makeShot(0.2, {
      spread: 20,
    });

    this.makeShot(0.35, {
      spread: 100,
      decay: 0.91,
      scalar: 0.8,
    });

    this.makeShot(0.1, {
      spread: 120,
      startVelocity: 25,
      decay: 0.92,
      scalar: 1.2,
    });

    this.makeShot(0.1, {
      spread: 120,
      startVelocity: 45,
    });
  }

비슷한 방법으로 각기 다른 설정을 적용시키면 다양한 효과를 만들 수 있다.

• SchoolPride
  

• Fireworks
  

• Snow
  

2. js-confetti

react-canvas-confetti 보다 훨씬 쉽게 사용할 수 있었다. 색종이 효과는 한가지 고정으로 따로 변경 할 수 없는 것 같고, 색종이의 색상, 형태, 사이즈, 개수 만 변경 할 수 있는 것 같다.

설치 방법

npm i js-confetti

사용 방법

제일 처음 색종이 효과를 나타낼 Canvas를 Document에 생성 하고, 그위에 addConfetti 메서드를 호출하면 색종이 폭발 효과를 볼 수 있다.

//Home.tsx

import JSConfetti from "js-confetti";

function Home() {
  //HTML Canvas 요소를 생성하여 페이지에 추가
  const jsConfetti = new JSConfetti(); 

  //색종이 커스터마이징
  const handleClick = () => {
    jsConfetti.addConfetti({
      confettiColors: [
        "#ff0a54",
        "#ff477e",
        "#ff7096",
        "#ff85a1",
        "#fbb1bd",
        "#f9bec7",
      ],
      confettiRadius: 5,
      confettiNumber: 500,
    });
  };

  return <button onClick={handleClick}>CLICK</button>;
}

export default Home;

JSConfetti addConfetti props

confettiColors : 색종이 색상 설정.
confettiRadius : 색종이 조각 반지름 길이 설정.
confettiNumber : 색종이 조각 개수 설정.
emojis : 이모티콘으로 색종이 조각 사용.
emojiSize : 이모티콘 사이즈 설정.

색종이 대신 이모티콘을 넣어서 사용 할 수도 있다.

//Home.tsx

import JSConfetti from "js-confetti";

function Home() {
  //HTML Canvas 요소를 생성하여 페이지에 추가
  const jsConfetti = new JSConfetti(); 

  //색종이 커스터마이징
  const handleClick = () => {
    jsConfetti.addConfetti({
      emojis: ["🍔", "🍕", "🍺"],
      emojiSize: 100,
      confettiNumber: 30,
    });
  };

  return <button onClick={handleClick}>CLICK</button>;
}

export default Home;

😱 수정 사항

위와 같이 하게되면 Home 컴포넌트가 렌더링 될 때마다, new JSConfetti() 에 의해서 HTML에 Canvas 요소가 계속 추가 되게 된다. 깃허브 에도 "new JSConfetti() 는 HTML Canvas 요소를 생성하여 페이지에 추가하므로 한 번만 호출하십시오!" 라고 써져있다.

위 영상을 보면 Home에 들어갈때 마다 canvas 요소가 계속 추가되는 것을 볼 수 있다.
const jsConfetti = new JSConfetti(); 의 위치를 App.js ( 처음 실행 될 때 )로 옮기고 export 시켜주었다.

import JSConfetti from "js-confetti";

export const conteffi = new JSConfetti();

그리고 Home 또는 사용할 곳에서 import 하여 똑같이 사용하면 된다.

//Home.tsx

import JSConfetti from "js-confetti";
import { conteffi } from "../App";

function Home() {
  //색종이 커스터마이징
  const handleClick = () => {
    conteffi.addConfetti({
      emojis: ["🍔", "🍕", "🍺"],
      emojiSize: 100,
      confettiNumber: 30,
    });
  };

  return <button onClick={handleClick}>CLICK</button>;
}

export default Home;

3. 마무리

위 2개 말고도 다른 여러 라이브러리들이 있었는데 사용법이 다 비슷비슷 한 것 같았다. 개인적으로
react-canvas-confetti 가 조금 더 복잡하지만 다양하게 커스터마이징 할 수 있어서, 다양한 효과들을 넣기에는 좋을 것 같다.