[React] react-daum-postcode

Daum 우편번호 검색 서비스를 React 환경에서 간편하게 이용할 수 있습니다.

function InputAddressSearch(): JSX.Element {
	const methods = useFormContext();
const CURRENT_URL =
		'https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js';
	const open = useDaumPostcodePopup(CURRENT_URL);

	const onClickHandler = () => {
		open({ onComplete: handleComplete });
	};

	const handleComplete = (data: any) => {
		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})` : '';
		}
	};

	return (
		<Container>
			<Button
					text="우편번호"
					type={ButtonType.NORMALGRAY}
					click={onClickHandler}
			/>
		</Container>
	);
}

버튼 클릭시 onClickHandler가 실행되고 현재 주소 값을 가져온다...
아래 참고하기...

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