QR Code

QR Code

QR Code는 제공된 데이터를 기반으로 QR 코드를 생성해주는 컴포넌트예요. URL이나 텍스트 같은 데이터를 전달하면 즉시 QR 코드로 렌더링해줘요.

출처: 문서

본문

사용법 (Usage)

import { QrCode } from "@chakra-ui/react"

<QrCode.Root value="...">
  <QrCode.Frame>
    <QrCode.Pattern />
  </QrCode.Frame>
</QrCode.Root>

:::info

클로즈드 컴포넌트 구성(closed component composition)을 선호한다면, 아래의 스니펫을 확인하세요.

:::

예시 (Examples)

크기 (Sizes)

size prop을 사용해 QR 코드의 크기를 설정할 수 있어요.

로고 오버레이 (Logo Overlay)

QrCode.Overlay 컴포넌트에 children prop을 전달해 QR 코드에 로고나 오버레이를 추가할 수 있어요.

채우기 (Fill)

fill prop을 사용해 QR 코드의 채우기 색상을 설정할 수 있어요.

다운로드 (Download)

QrCode.DownloadTrigger를 사용해 QR 코드를 다운로드할 수 있어요.

fileName과 mimeType props는 필수예요.

오류 보정 (Error Correction)

링크가 너무 길거나 로고 오버레이가 넓은 영역을 덮는 경우, 오류 보정 레벨을 높일 수 있어요.

encoding.ecc 또는 encoding.boostEcc 속성을 사용해 오류 보정 레벨을 설정해요:

  • L: 최대 7% 데이터 손실 복구 허용 (기본값)
  • M: 최대 15% 데이터 손실 복구 허용
  • Q: 최대 25% 데이터 손실 복구 허용
  • H: 최대 30% 데이터 손실 복구 허용

스토어 (Store)

RootProvider 컴포넌트는 QR 코드의 컨텍스트를 제공해요. useQrCode 훅의 값을 받아서, QR 코드 바깥에서 컴포넌트의 상태와 메서드에 접근할 수 있어요.

입력 (Input)

QrCode 컴포넌트를 Input 컴포넌트와 함께 사용하는 예시예요.

스피너 (Spinner)

QrCode 컴포넌트를 Spinner 컴포넌트와 함께 사용하는 예시예요.

클로즈드 컴포넌트 (Closed Component)

클로즈드 컴포넌트 구성을 위해 QR 코드를 설정하는 방법을 보여줘요.

프로젝트에 클로즈드 컴포넌트를 자동으로 추가하려면 다음 명령을 실행하세요:

npx @chakra-ui/cli snippet add qr-code

Props

QrCode의 Root, DownloadTrigger 파트에서 사용 가능한 props는 공식 문서에서 확인할 수 있어요.

더 알아보기 (Learn more)