우편번호 컴포넌트 사용은 Daum Postcode를 사용한다. (kakako 지도) UI와 사용법이 쉽게 되어 있다.
https://www.npmjs.com/package/react-daum-postcode -> 참조
가이드는 아래의 주소를 참조!!
https://postcode.map.daum.net/guide
설치방법
$ npm install --save react-daum-postcode
또는
$ yarn add react-daum-postcode
vsCode 터미널에서 설치하면 된다.
import React from 'react'; (나는 next.js를 사용하기에 필요없었다.)
import DaumPostcode from 'react-daum-postcode';
const onCompleteDaumPostcode = (data: any) => {
setAddress(data.address)
setZonecode(data.zonecode)
};
** 여러 데이터 중 address와 zonecode(우편번호) 사용 시 위의 방법으로 사용하였다
(어떤 데이터가 있는지 궁금하다면 위의 가이드 URL 참조)
return <DaumPostcode onComplete={handleComplete} />