React에서 이더리움 결제 QR 코드 만들기: EIP-681과 ETH·wei 변환
전면 개정 안내 (2026-07-24) 2021년의 오래된 React 전용 이더리움 QR 패키지 예제를 폐기하고, 표준 결제 URI인 EIP-681과 현재 React 환경을 기준으로 다시 작성했습니다. 이더리움 결제 QR 코드는 단순히 지갑 주소를 QR 이미지로 바꾸는 기능이 아닙니다. 받는 주소, 네트워크, 금액을 지갑 앱이 이해할 수 있는 EIP-681 결제 요청 URI 로 조합한 뒤 QR 코드에 넣어야 합니다. 이 글에서는 다음 결과물을 만듭니다. 받는 주소와 ETH 금액 입력 ethers 로 주소 형식 검증 ETH 문자열을 정확한 wei 정수로 변환 체인 ID가 포함된 EIP-681 URI 생성 qrcode.react 로 SVG QR 코드 표시 QR에 포함된 원문을 화면에 함께 표시하고 복사 QR 코드를 스캔한다고 곧바로 송금되는 것은 아닙니다. 호환 지갑이 결제 요청을 읽고 사용자가 주소, 네트워크, 금액과 수수료를 최종 확인한 뒤 서명해야 전송됩니다. 기존 방식에서 무엇이 달라졌나 예전 글은 react-ether-qrcode 와 ethereum-qr-code 에 의존해 패키지가 기대하는 속성을 맞추는 방식이었습니다. 이런 전용 컴포넌트는 관리가 중단되거나 React 버전이 바뀌면 쉽게 동작하지 않습니다. 이번에는 역할을 분리합니다. 역할 사용 도구 결제 요청 형식 EIP-681 ethereum: URI 주소와 금액 검증 ethers v6 QR 렌더링 qrcode.react React 개발 환경 Vite 결제 요청 문자열은 직접 만들기 때문에 특정 이더리움 QR 패키지의 내부 구현에 묶이지 않습니다. QR 라이브러리는 완성된 문자열을 그림으로 표시하는 역할만 합니다. EIP-681 결제 URI 이해하기 네이티브 ETH 결제 요청의 기본 형태는 다음과 같습니다. text ethereum:<받는_주소>@<체인_ID>?value=<wei_...