회원가입시에 주소값을 필요로 할때, 특히나 주소의 경우에는 정확한 값을 받아올 필요가 있다.
이때는 사용자가 직접 주소 값을 입력하는 것 보다 우편번호 검색 서비스를 이용해 정확한 값을 받아 오는 것이 좋다.
react-daum-postcode를 선택한 이유
따로 key를 발급받을 필요 없이 사용할 수 있다.
회원가입 기능을 구현하면서, 정확한 주소를 받기 위해 우편번호 API가 필요했다.
https://github.com/bernard-kms/react-daum-postcode
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
'Front-end > Module' 카테고리의 다른 글
[openapi-generator-cli] OAS-generator로 타입 세이프하게 API연결하는 방법 (0) | 2024.08.27 |
---|---|
[http-proxy-middleware] proxy사용해서 CORS에러 해결하기 (0) | 2023.01.27 |
[@react-google-maps/api] Google 지도에 Custom Marker 나타내기 (1) | 2022.09.01 |
[Module] Yup & Formik 정리 (0) | 2022.08.23 |
[styled-components] TypeScript에서 전역 스타일(Global Style) 적용하기 (0) | 2022.06.29 |