소개

프론트에서 자기가 저장하고자 하는 곳의 주소를 받아와서 해당 주소에 맞는 위도(Latitude)와 경도(Longtitude)를 저장하는 방법을 알아보자

1. 다음 주소 라이브러리를 활용해 주소 받기

아래의 react-daum-postcode 라이브러리를 다운받아서 사용하자

npm i react-daum-postcode

daum주소 창을 입력하는 react 전체 코드

import React, { useState } from "react";
import DaumPostcode from "react-daum-postcode";
import ReactModal from "react-modal";

interface Props {
  setAddress: (value: string) => void;
  address: string;
}
const PostCode: React.FC<Props> = ({ setAddress, address }) => {
  const [isOpen, setIsOpen] = useState<boolean>(false); //추가

  const completeHandler = (data: any) => {
    setAddress(data.roadAddress);
    setIsOpen(false); // 주소등록 했으면 닫기
  };

  // Modal 스타일
  const customStyles = {
    overlay: {
      backgroundColor: "rgba(0,0,0,0.5)",
      zIndex: 1000, 
    },
    content: {
      left: "0",
      margin: "auto",
      width: "500px",
      height: "600px",
      padding: "0",
      overflow: "hidden",
      zIndex: 1001, 
    },
  };

  // 검색 클릭
  const toggle = () => {
    setIsOpen(!isOpen);
  };


  return (
    <div style={{display:'flex', width:'70%', justifyContent:'space-between'}}>
      {/* <input
        value={zipCode}
        readOnly
        placeholder="우편번호"
        style={{ width: "30%" }}
      /> */}
      <input
        value={address}
        readOnly
        placeholder="도로명 주소"
        style={{ width: "85%",minHeight:'30px',borderRadius:'5px', border:'1px solid black' }}
      />
  
      <button type="button" onClick={toggle} style={{ width:'12%',borderRadius:'5px', border:'1px solid black',cursor:'pointer'}}>
        찾기
      </button>
      <ReactModal isOpen={isOpen} ariaHideApp={false} style={customStyles}>
        <div
          style={{
            display: "flex",
            flexDirection: "column",
            alignItems: "center"}}>
          <DaumPostcode onComplete={completeHandler} />
          <button
            type="button"
            onClick={toggle}
            style={{
              marginTop: "10px",
              width: "10%",
              background: "#FF5353",
              color: "white",
              border: "none",
              padding: "5px",
              fontWeight: "bold",
            }}>
            X
          </button>
        </div>
      </ReactModal>
    </div>
  );
};

export default PostCode;

코드 분석

const [isOpen, setIsOpen] = useState<boolean>(false); //모달을 열고 닫는 상태

const completeHandler = (data: any) => {
  setAddress(data.roadAddress); // 부모에게 데이터 보내 저장하는 코드
  setIsOpen(false); // 주소등록 했으면 닫기
};

  // Modal 스타일
const customStyles = {
  overlay: {
    backgroundColor: "rgba(0,0,0,0.5)",
    zIndex: 1000, 
  },
  content: {
    left: "0",
    margin: "auto",
    width: "500px",
    height: "600px",
    padding: "0",
    overflow: "hidden",
    zIndex: 1001, 
  },
};

// 검색 클릭 시 주소창 모달 오픈
const toggle = () => {
  setIsOpen(!isOpen);
};

<div style={{display:'flex', width:'70%', justifyContent:'space-between'}}>
      {/* <input // 우편번호를 저장하는 코드 (useState를 이용해 zipcode저장 필요)
        value={zipCode}
        readOnly
        placeholder="우편번호"
        style={{ width: "30%" }}
      /> */}
      <input
        value={address}
        readOnly
        placeholder="도로명 주소"
        style={{ width: "85%",minHeight:'30px',borderRadius:'5px', border:'1px solid black' }}
      />
  	
		//주소를 찾기위한 버튼
      <button type="button" onClick={toggle} style={{ width:'12%',borderRadius:'5px', border:'1px solid black',cursor:'pointer'}}>
        찾기
      </button>

		// DaumPostcode를 띄워주기 위한 모달 
      <ReactModal isOpen={isOpen} ariaHideApp={false} style={customStyles}>
        <div
          style={{
            display: "flex",
            flexDirection: "column",
            alignItems: "center"}}>
          <DaumPostcode onComplete={completeHandler} />
          <button
            type="button"
            onClick={toggle}
            style={{
              marginTop: "10px",
              width: "10%",
              background: "#FF5353",
              color: "white",
              border: "none",
              padding: "5px",
              fontWeight: "bold",
            }}>
            X
          </button>
        </div>
      </ReactModal>
    </div>

이렇게 입력받은 주소를 활용해 백엔드에서 위도경도를 찾아 저장해보자