React 카카오(Daum) 주소 찾기 API 사용하기

카카오 api 띄우기

import DaumPostcode from 'react-daum-postcode';

    const [address, setAddress] = useState(""); // 우편번호

    const [detailaddress, setDetailaddress] = useState(""); //api상의 주소

    const [detail2address, setDetail2address] = useState(""); //상세주소

    const {addDocument, response } = useFirestore('manmul');

    const [openPostcode, setOpenPostcode] = useState(false); //카카오api

 

     /**

     * 카카오api handle

     */

    const clickButton =() =>{

        setOpenPostcode(current => !current);

    }

    const selectAddress = (data) => {

        console.log(`

                주소: ${data.address},

                우편번호: ${data.zonecode}

            `)

            setAddress(data.zonecode);

            setDetailaddress(data.address);

            setOpenPostcode(false);

    }

 

 

<tr><td className="title">주소</td>

           

                <input  id="address_kakao"

                    onClick={clickButton}

                    value={address}

                    ></input>

                    {openPostcode &&

                        <DaumPostcode

                            onComplete={selectAddress}  // 값을 선택할 경우 실행되는 이벤트

                            autoClose={false} // 값을 선택할 경우 사용되는 DOM을 제거하여 자동 닫힘 설정

                            defaultQuery='판교역로 235' // 팝업을 열때 기본적으로 입력되는 검색어

                            />}

           

            <td className="title">상세주소</td>

            <td><input value={detailaddress}></input></td>

            <input value={detail2address}

                onChange={(e)=>{ setDetail2address(e.target.value)}}

            ></input>

            </tr>

reference

https://developers.kakao.com/docs/latest/ko/local/dev-guide

Kakao Developers

https://myhappyman.tistory.com/240

카카오(Daum) 주소 찾기 API 사용하기

https://jforj.tistory.com/268

[React] 카카오 주소 검색 사용하기