이번 프로젝트에서 전자서명 구현이 필요했다.
react-signature-canvas 라이브러리를 사용했는데, npm 문서는 여기참고하면 된다.

1. 설치

yarn add react-signature-canvas

위 명령어를 통해 라이브러리 설치

2. 사용

import SignatureCanvas from 'react-signature-canvas'

<SignatureCanvas
        canvasProps={{
          className:
            'sigCanvas',
        }}
      />

사용법은 import하고 컴포넌트를 바로 사용해주면 된다.
해당 컴포넌트에서 canvasProps 이름으로 prop을 전달받고 있는데

아래와 같은 프롭들을 전달할 수 있다

• velocityFilterWeight : number, default: 0.7
• minWidth : number, default: 0.5
• maxWidth : number, default: 2.5
• minDistance: number, default: 5
• dotSize : number or function, default: () => (this.minWidth + this.maxWidth) / 2
• penColor : string, default: 'black'
• throttle : number, default: 16

또한 서명 동작에 대한 이벤트 리스너로 아래의 두가지 리스너가 있다.

• onEnd : 서명 시작된 때를 감지
• onBegin : 서명이 시작된 후 끝날 때를 감지

3. api

문서를 바탕으로 제공하고 있는 api들을 정리해봤다.

• isEmpty() : boolean
• clear() : backgroundColor prop을 사용해 서명 클리어
• fromDataURL(base64String, options) : base64 문자열 이미지를 캔버스로 그려줌
• toDataURL(mimetype, encoderOptions): 서명 이미지를 데이터 url(base64String)으로 변환
• off(): 연결된 이벤트 핸들러 모두 해제
• on(): 모든 이벤트 핸들러 연결
• getTrimmedCanvas(): 모든 공백을 제거한 버전의 서명을 캔버스로 반환