[react-daum-postcode] 정확한 주소값 받아오기

회원가입시에 주소값을 필요로 할때, 특히나 주소의 경우에는 정확한 값을 받아올 필요가 있다. 

이때는 사용자가 직접 주소 값을 입력하는 것 보다 우편번호 검색 서비스를 이용해 정확한 값을 받아 오는 것이 좋다.

 

react-daum-postcode를 선택한 이유


따로 key를 발급받을 필요 없이 사용할 수 있다.
회원가입 기능을 구현하면서, 정확한 주소를 받기 위해 우편번호 API가 필요했다.

https://github.com/bernard-kms/react-daum-postcode

GitHub - bernard-kms/react-daum-postcode: 리액트 컴포넌트로 만든 Daum 우편번호 검색 서비스입니다.

 

import React from 'react'
import {Address, useDaumPostcodePopup} from 'react-daum-postcode'

function AddressField({ ...rest}: IFormikFieldProps) {
  const DaumPostOpen = useDaumPostcodePopup(process.env.REACT_APP_API_DAUM_SCRIPT_URL)

  const handleComplete = (data: Address) => {
    let fullAddress = data.address
    let extraAddress = ''

    if (data.addressType === 'R') {
      if (data.bname !== '') {
        extraAddress += data.bname
      }
      if (data.buildingName !== '') {
        extraAddress += extraAddress !== '' ? `, ${data.buildingName}` : data.buildingName
      }
      fullAddress += extraAddress !== '' ? ` (${extraAddress})` : ''
    }
    setFieldValue(name, fullAddress)
  }

  const handleClickPostSearch = () => {
    DaumPostOpen({onComplete: handleComplete})
  }

  return (
    <FormikField
      readOnly
      endAdornment={<InputButton title={'검색'} disabled={false} onClick={handleClickPostSearch} />}
      {...rest}
    />
  )
}

export default AddressField

로직 분리를 위해 AddressField 컴포넌트를 하나 만들어 주었고,
input 내 버튼을 클릭 했을 때, 주소 팝업창을 띄워줄 수 있도록 만들어 주었다.
그리고 최종 주소인 fullAddress를 name의 value값으로 넣어줬다.(formik)

 

+ InputButton으로 불러온 팝업창의 결과값(fullAddress)을 input값으로 입력해줄 것이므로 

input에는 readOnly값을 넣어줬다.

 

결과

 ++ 라이브러리 없이는 다음과 같이 사용할 수 있다.

https://github.com/HelloYukyung/TIL/commit/1502cf70e6eaad5b691b020ef9f30eeba85ef93a