Daum 우편번호 서비스 라이브러리(@react-daum-postcode)

실제 서비스에서는 회원가입을 할 때나, 결제 할 때 주소를 입력하는 경우가 많다.

우편번호 찾기 하면 뜨는 이 화면은 Daum post code를 활용한 화면이다.

앞으로도 쓸 일이 있을 거 같아 정리하기로!

 

* 참고

https://postcode.map.daum.net/guide#usage

Daum 우편번호 서비스

 

 

리액트로 개발 할 거라, 리액트 컴포넌트로 만든 Daum 우편번호 검색 서비스 라이브러리를 활용했다.

 

https://www.npmjs.com/package/react-daum-postcode

react-daum-postcode

 

* 사용하는 순서

1. 설치

npm install react-daum-postcode

yarn add react-daum-postcode 

 

 

2. 컴포넌트 생성

import DaumPostcode from 'react-daum-postcode';

 

const MyComponent=()=>{

return (

<DaumPostcode/>

)

}

 

이렇게 기본으로 만들고 먼저 테스트~!

 

 

3. 모달

상위 컴포넌트에서 버튼을 누르면, 모달이 열리게 하고 그 안에 DaumPostcode를 보여주는 코드를 만들기로 했다.

나는 모달을 사용했는데, 다른 방식도 있으니 이건 본인 마음대로 선택하면 된다.

 

import { useDaumPostcodePopup } from 'react-daum-postcode'; 를 활용한 팝업 방식도 가능하다.

그럼 여기까지 완성!

 

 

4. 주소 정보 받기

내 목표는 상위 컴포넌트에서 클릭한 주소 정보를 받는 것이다.

먼저, 클릭한 주소가 제대로 출력되는지 체크해줬다.

 

위에 라이브러리에 설명이 잘 나와있으니 자세한건 위에 링크 참고!

 

onComplete

 

검색 후 정보를 받아오는 함수인 onComplete를 활용해주어 콘솔이 찍히게 했다.

 

주소 정보가 제대로 나오는 것을 확인해서 다음 단계로!

 

 

5. 상위 컴포넌트에서 입력받기

이 단계가 살짝 헷갈렸다..

 

순서를 정리하자면,

사용자가 주소를 선택하면 onComplete가 실행된다.

onComplete 함수 안에는 부모 컴포넌트가 자식에게 넘겨준 함수가 있는데,

그 함수가 호출되며, 주소를 부모데이터에 전달해준다.

그리고 부모 컴포넌트는 받은 주소 정보를 상태로 저장해주었다.

 

 

 

(선택) input 속성 수정

사이트들을 보면 직접 주소 입력은 안되고, 검색하여 클릭한 주소가 입력된다.

또, 직접 문자 수정이 안되는 경우들이 대부분이다.

 

따라서, input에 readOnly 속성을 추가해주어 클릭된 값만 뜨게 해줬다.

그럼 이렇게 된다요~!