[React] react-daum-postcode로 주소 api사용하기

1. react-daum-postcode 설치

npm install react-daum-postcode

 

 

2. 코드

내장함수로 onCompletePost가 있는데

주소를 검색해서 클릭하면 저절로 닫히면서 data로 값들이 넘어온다.

그중에서 나는 address를 쓸 것이다.

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

const Post = (props) => {
  const address = props.address;
  const setAddress = props.setAddress;

  const onCompletePost = (data) => {
    console.log(data.address);
    setAddress(data.address);
  };

  const postCodeStyle = {
   
    display: "block",
    position: "absolute",
    top: "20%",
    width: "400px",
    height: "400px",
    padding: "7px",
    zIndex: 100, 
  };

  return (
    <>
    
        <DaumPostcode
          style={postCodeStyle}
          autoClose
          onComplete={onCompletePost}

        />
     
    </>
  );
};

export default Post;

 

 

 

3. 다른 컴포넌트에서 불러와서 팝업으로 만들기

이것은 Signup페이지인데

주소검색 버튼을 누르면 popup을 띄워준다.

위에서 만든 컴포넌트가 자식 컴포넌트이기때문에

부모에서 address를 알게 하기 위해서

부모에서 useState를 자식에게 넘겨줬다.

 

 

 

 

4. 실행

 

 

 

 

---

깃허브 주소

https://github.com/Market-kurly/kurly_client/tree/hyeonju