React 카카오 우편번호 (주소검색) api 사용법

회원가입 할 때 주소를 입력받아야 해서 카카오 우편번호 api를 사용하게 되었다.

어어어어어엄청 쉽다.

설치

npm install react-daum-postcode

사용

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

 

const SignUp = () => {

  const [address, setAddress] = useState(''); // 주소
  const [addressDetail, setAddressDetail] = useState(''); // 상세주소

  
  const [isOpenPost, setIsOpenPost] = useState(false);

 

  const onChangeOpenPost = () => {
    setIsOpenPost(!isOpenPost);
  };

  const onCompletePost = (data) => {
    let fullAddr = data.address;
    let extraAddr = '';

    if (data.addressType === 'R') {
      if (data.bname !== '') {
        extraAddr += data.bname;
      }
      if (data.buildingName !== '') {
        extraAddr += extraAddr !== '' ? `, ${data.buildingName}` : data.buildingName;
      }
      fullAddr += extraAddr !== '' ? ` (${extraAddr})` : '';
    }

    setAddress(data.zonecode);
    setAddressDetail(fullAddress);
    setIsOpenPost(false);
  };

 

  const postCodeStyle = {
    display: 'block',
    position: 'relative',
    top: '0%',
    width: '400px',
    height: '400px',
    padding: '7px',
  };

 

  return (
    <>
      {isOpenPost  ? (
         <DaumPostcode style={postCodeStyle} autoClose onComplete={onCompletePost } />
      ) : null}
    </>
  );
};

export default SignUp;