react-daum-postcode

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

Install

npm install react-daum-postcode
# or
yarn add react-daum-postcode

# if react not installed, install react also.
npm install react
# or
yarn add react

Embed

DaumPostcodeEmbed 컴포넌트를 사용하여, 우편번호 검색 서비스를 임베드 방식으로 사용할 수 있습니다.

import React from 'react';
import DaumPostcodeEmbed from 'react-daum-postcode';

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

    console.log(fullAddress); // e.g. '서울 성동구 왕십리로2길 20 (성수동1가)'
  };

  return <DaumPostcodeEmbed onComplete={handleComplete} {...props} />;
};

DaumPostcodeEmbed 컴포넌트에 다음 우편번호 서비스의 생성자 및 임베드 설정값 등을 props로 전달할 수 있습니다. 전달하지 않은 설정값은 다음 우편번호 서비스의 기본 설정을 따라갑니다.

기타 Daum 우편번호 생성자 속성들을 동일한 이름으로 props를 전달할 수 있습니다. 속성값에 대해서는 Daum 우편번호 서비스 가이드를 참고해주세요.

Popup

useDaumPostcodePopup hook 을 사용하여, 반환받은 함수를 통해 우편번호 검색 서비스를 팝업 방식으로 이용할 수 있습니다.

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

const Postcode = () => {
  const open = useDaumPostcodePopup(scriptUrl);

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

    console.log(fullAddress); // e.g. '서울 성동구 왕십리로2길 20 (성수동1가)'
  };

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

  return (
    <button type='button' onClick={handleClick}>
      Open
    </button>
  );
};

useDaumPostcodePopup 실행 시 우편번호 서비스의 스크립트 주소를 전달할 수 있습니다. 반환한 함수를 실행할 때 다음 우편번호 서비스의 생성자 및 팝업 설정값을 전달할 수 있습니다. 전달하지 않은 설정값은 다음 우편번호 서비스의 기본 설정을 따라갑니다.

기타 Daum 우편번호 생성자 속성들을 동일한 이름으로 props를 전달할 수 있습니다. 속성값에 대해서는 Daum 우편번호 서비스 가이드를 참고해주세요.

안내

react-daum-postcode는 Daum 우편번호 서비스와 독립적으로 제작된 패키지입니다. React환경에서 발생하는 react-daum-postcode의 버그는 패키지 레포지터리의 이슈트래커에 말씀해주세요. 만약 Daum 우편번호 서비스 자체의 문제라고 생각하신다면, 다음 우편번호 서비스의 FAQ와 이슈트래커를 참조해주세요.

> 1.8.3

Github 레포지터리의 릴리즈 기록을 참고해주세요

1.8.2

• 검색결과 TypeScript 타입에 noSelected 인자 추가

1.8.1

• TypeScript 타입선언 업데이트

1.8.0

• 구 우편번호를 검색 결과에서 제외하는 zonecodeOnly props 추가

1.7.1

• Daum Postcode 커스텀 props가 DOM으로 주입되는 문제 해결

1.7.0

• React 버전을 16.4로 올림
• TypeScript 타입선언 파일을 추가
  • DaumPostcode컴포넌트 타입
  • 컴포넌트의 props인 DaumPostcodeProps 타입
  • onComplete props의 인자로 쓰이는 AddressData 타입

1.6.0

• React 버전을 16.3 으로 올림
• alwaysShowEngAddr, submitMode, useSuggest 생성자 속성을 추가

1.5.0

• Daum 우편번호 스크립트가 로드되지 않을때, 오류 메시지를 표시
• 패키지 라이브러리를 빌드할 때 minify 적용

1.4.2

• 다음 우편주소 검색창이 여러번 반복해서 열릴수 있도록 함

1.4.1

• 다음 우편주소 스크립트를 중복으로 생성하지 않도록 함 (@ignocide in #3)
• React 버전을 16.2.0으로 올림

1.4.0

• 다음 우편번호 생성자가 받을수 있는 모든 속성을 props를 통해 전달
• React 버전을 16.0.0으로 올림

1.3.0

• 다음 우편번호 스크립트를 자체적으로 로드
• README 수정

1.2.1

• 에러 핸들링 개선
• README 수정

1.2.0

• React 버전을 15.5.0으로 올림
• prop-types 패키지 사용

1.1.0

• 다음 우편번호 스크립트를 동적으로 로딩

1.0.1

• 문서 수정
• eslint 설정

1.0.0

• 최초 배포