결제를 구현해야 하기 때문에 필수적으로 사용자의 주소를 입력받아야 했다. 주소를 직접 입력하는 게 아닌 당연히 우편번호 서비스를 이용해 주소를 입력받기로 했고, 우편번호 서비스 중에 다음이 가장 UI도 깔끔하고 구현하기도 간단해서 다음 우편번호 서비스로 구현하게 되었다.
특히 React 전용으로 react-daum-postcode를 사용하면 더 간편하게 사용할 수 있다.

react-daum-postcode

npm install react-daum-postcode

import { useDaumPostcodePopup } from 'react-daum-postcode';

export default function Address() {
	const open = useDaumPostcodePopup();
    
    const handlePostCode = () => {
      open({
        onComplete: (data) => {
          setValue('zipCode', data.zonecode);
          setValue('address', data.roadAddress);
        },
        width: 500,
        height: 600,
        left: window.innerWidth / 2 - 500 / 2,
        top: window.innerHeight / 2 - 600 / 2,
      });
  	};
}

open은 팝업 창을 열기 위한 함수로 팝업 창의 크기, 위치, 그리고 데이터 선택 완료 시 수행할 동작을 설정할 수 있다.
onComplete는 사용자가 팝업 창에서 주소를 선택한 후 실행되는 콜백 함수이다. data라는 객체를 받아서, data에 포함된 우편번호(zonecode)와 도로명 주소(roadAddress)를 원하는 변수에 저장해주었다.

반환되는 값들은 매우 많으므로, 아래 페이지를 참고하면 된다.
다음 우편번호 속성

이를 페이지에 적용하면 다음과 같이 주문 폼을 만들 수 있다.