안녕하세요.
이번에는 사용ajaxzip3을 소개하고 React에서도 주소의 자동 입력을 간단하게 실현하는 방법을 소개한다.

주소 자동 입력

온라인 쇼핑객의 약 3분의 2가 구매를 마치기 전에 카트에서 벗어난 것으로 알려졌다.전자상거래 사이트의 카트 폐기율은 평균 70%에 달하며, 카트의 이탈을 방지하고 구매율을 높이기 위해 EFO(입력표 최적화)도 중요하다.

사용 방법

우선, html 파일의 body에서ajaxzip3를 읽습니다.
index.html

<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>

함수

AjaxZip3.zip2addr()의 매개 변수에 input 라벨의 이름을 지정하고 우편 번호를 입력하면 도도부현, 시가촌, 번지를 자동으로 입력합니다.
자동 입력은 onChange를 터치하지 않기 때문에state는 업데이트되지 않으며, 폼에서api로 데이터를 전달할 때 비울 수 있습니다.
따라서 지정한 id의 폼에 입력한 주소는document입니다.getElementById('id').value로 가져오고 setState에서 업데이트합니다.
Form.js

class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      user: {}
    };
  }

  handleChange = e => {
    const params = this.state.user;
    params[e.target.name] = e.target.value;
    this.setState({ user: params });
  };

  complementAddress = () => {
    const { AjaxZip3 } = window;
    AjaxZip3.zip2addr(
      'postCodeH',
      'postCodeF',
      'address1',
      'address2',
      'address3'
    );
  };

  onBlurZipcode = () => {
    this.setState({
      user: {
        ...this.state.user,
        address1: document.getElementById('address1').value,
        address2: document.getElementById('address2').value,
        address3: document.getElementById('address3').value
      }
    });
  };

  render() {
    return(
      <div>下記フォーム</div> 
    )  
  }
}
export default Form;

우편번호 입력 양식

 <input
    name="postCodeH"
    size="3"
    maxLength="3"
    onChange={e => this.handleChange(e)}
/>
-
<input
    name="postCodeF"
    size="4"
    maxLength="4"
    onChange={e => this.handleChange(e)}
    onKeyUp={this.complementAddress}
    onBlur={this.onBlurZipcode}
/>

주소 입력 양식

<input
    name="address1"
    id="address1"
    onChange={e => this.handleChange(e)}
/>
<input
    name="address2"
    id="address2"
    onChange={e => this.handleChange(e)}
/>
<input
    name="address3"
    id="address3"
    onChange={e => this.handleChange(e)}
/>

영상을 올릴 수 없으니까.

우편번호 입력 후

매우 편리하다.
감사합니다.