react-daum-postcode

많은 웹 사이트에서 보이는 다음 우편번호 서비스 API를 사용해봅시다.
참고로 리액트에서 쓸 수 있는 react-daum-postcode 패키지가 있어서 이 패키지를 사용했습니다.

npm install react-daum-postcode

react-daum-postcode 를 사용하면 다음 우편번호 서비스 API를 리액트 컴포넌트처럼
이렇게 <DaumPostcode /> 사용할 수 있습니다.

import DaumPostcode from 'react-daum-postcode`;

const addressInput = () => {
  return (
    <div>
      <DaumPostcode />
    </div>
  )
}

다음으로는 에서 사용할 수 있는 props에 대해 알아봅시다

theme

우편번호 서비스 화면의 색상 테마를 변경하는 props 입니다.

const themeObj = {
   bgColor: "", 			// 바탕 배경색
   searchBgColor: "", 		// 검색창 배경색
   contentBgColor: "", 		// 본문 배경색(검색결과,결과없음,첫화면,검색서제스트)
   pageBgColor: "", 		// 페이지 배경색
   textColor: "", 			// 기본 글자색
   queryTextColor: "", 		// 검색창 글자색
   postcodeTextColor: "", 	// 우편번호 글자색
   emphTextColor: "", 		// 강조 글자색
   outlineColor: "" 		// 테두리
};

예시

import DaumPostcode from 'react-daum-postcode';

const addressInput = () => {
  const themeObj = {
   postcodeTextColor: "#FA7142",
   emphTextColor: "#333333",
  };
  return (
    <div>
      <DaumPostcode 
        theme={themeObj}
      />
    </div>
  );
}

style

우편번호 검색창을 감싸는 최상위 엘리먼트 스타일(CSS)을 지정하는 props
기존 스타일 props와 동일하게 스타일 객체를 작성하면 됩니다.

import DaumPostcode from 'react-daum-postcode';

const addressInput = () => {
  const style = {
    width: "400px",
    height: "600px",
    border: "1.4px solid #333333",
  };
  return (
    <div>
      <DaumPostcode 
        style={style}
      />
    </div>
  );
}

onComplete

우편번호 검색 결과 목록에서 특정 항목을 클릭한 경우, 해당 정보를 받아서 처리할 콜백 함수를 정의하는 props

onComplete 가 정의되지 않으면 아무 일도 일어나지 않는다.

우선 data 에 어떤 정보가 있는지 확인하기 위해 간단히 콘솔 로그를 찍어보자.

const completeHandler = (data) => {
  console.log(data);
}

위와 같이 (방대한 양의) 데이터가 찍힌다. 이 중 필요한 속성만 사용하면 된다.

import DaumPostcode from 'react-daum-postcode';

const addressInput = (props) => {
  const completeHandler = (data) => {
    { address, zonecode } = data;
    props.setAddress(address);
    props.setZonecode(zonecode);
  };
  return (
    <div>
      <DaumPostcode 
        onComplete={completeHandler}
      />
    </div>
  );
}

onClose

우편번호 찾기 화면을 팝업으로 띄운 후, 검색 결과를 선택하거나 브라우저의 닫기버튼을 통해 닫았을 때 발생하는 콜백함수를 정의하는 props

여기서 onClose props 는 state 를 받는데 FORCE_CLOSE, COMPLETE_CLOSE 가 있다.

• FORCE_CLOSE
  사용자가 브라우저 닫기 버튼을 통해 팝업창을 닫은 상태

• COMPLETE_CLOSE
  사용자가 검색결과를 선택하여 팝업창이 닫힌 상태
  oncomplete 콜백 함수가 실행 완료된 후에 onclose 실행

import { useState } from 'react';
import DaumPostcode from 'react-daum-postcode';

const addressInput = () => {
  const [isOpen, setIsOpen] = useState(false);
  
  const closeHandler = (state) => {
    if (state === 'FORCE_CLOSE') {
      setIsOpen(false);
      console.log('FORCE_CLOSE');
    } else if (state === 'COMPLETE_CLOSE') {
      setIsOpen(false);
      console.log('COMPLETE_CLOSE');
    }
  };
  return (
    <div>
      <DaumPostcode 
        onClose={closeHandler}
      />
    </div>
  );
}