ํ๋ก๊ทธ๋๋ฐ ์ธ๊ณ๋ฅผ ํ๊ตฌํฉ์๋ค.
๋ค์ ์ฃผ์ API ํ์ฉํ๊ธฐ
๋ค์ ์ฃผ์ API๋ฅผ ํ์ฉํ์ฌ ์ฌ์ฉ์์ ์ฃผ์ ์ ๋ ฅ ๋ฐฉ์์ ํธ๋ฆฌํ๊ฒ ๋ง๋ค ์ ์์ต๋๋ค.
๊ณต์ ๋ค์ ์ฃผ์ API ์ฌ์ฉ์ค๋ช ์
https://postcode.map.daum.net/guide
Daum ์ฐํธ๋ฒํธ ์๋น์ค
์ฐํธ๋ฒํธ ๊ฒ์๊ณผ ๋๋ก๋ช ์ฃผ์ ์ ๋ ฅ ๊ธฐ๋ฅ์ ๋๋ฌด ๊ฐ๋จํ๊ฒ ์ ์ฉํ ์ ์๋ ๋ฐฉ๋ฒ. Daum ์ฐํธ๋ฒํธ ์๋น์ค๋ฅผ ์ด์ฉํด๋ณด์ธ์. ์ด๋ ์ฌ์ดํธ์์๋ ๋ฌด๋ฃ๋ก ์ ์ฝ์์ด ์ฌ์ฉ ๊ฐ๋ฅํ๋ต๋๋ค.
postcode.map.daum.net
๋ค์ ์ฃผ์ API ํ์ฉ ํน์ง
1. API ํค๋ฅผ ๋ฐ๊ธ๋ฐ์ ํ์๊ฐ ์์ต๋๋ค.
2. ์ฌ์ฉ๋์ ๋ํ ์ ํ์ด ์์ต๋๋ค.
3. ๊ธฐ์ ์ฉ์ด๋ ์์ ์ ์ฉ๋์ด๋ ์๊ด์์ด ๋ฌด๋ฃ๋ก ์ฌ์ฉ ๊ฐ๋ฅํฉ๋๋ค.
4. ๊ธฐ์ด๊ตฌ์ญ๋ฒํธ๊ฐ ๋ฐ๊ธ๋ ๋๋ก๋ช ์ฃผ์, ์๋ฌธ ์ฃผ์๋ฅผ ํ์ธ ๊ฐ๋ฅํฉ๋๋ค.
5. ํ์ ์์ ๋ถ์์ ์ ๊ณตํ๋ "๋๋ก๋ช ์ฃผ์" DB๋ฅผ ์ง์ ์ ๋ฐ์ดํธ ๋ฐ๊ณ ์์ผ๋ฏ๋ก ๊ฐ์ฅ ์ต์ ์ ๋ฐ์ดํฐ๋ฅผ ์ด์ฉํ์ค ์ ์์ต๋๋ค.
ํ๋จ ๋ก๊ณ ๋ฅผ ์์๋ก ๊ฐ๋ฆด ๊ฒฝ์ฐ, ์ฌ์ฉ์ ์ ์ฝ์ด ๋ฐ์ํ ์ ์์ต๋๋ค.
๋ค์ ์ฃผ์ API ํ์ฉ ๋ฐฉ๋ฒ
React์์ ํธ๋ฆฌํ๊ฒ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ ๋ค์ ์ฃผ์ ๊ด๋ จ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋๋ ๊ฒ์ ๋๋ค.
์ ๋ DaumPost.jsx ํ์ผ์ ๋ง๋ค์ด ํ์ํ ํ์ด์ง์์ < DaumPost /> ์ ๊ฐ์ ํ์์ผ๋ก ์ํฌํธํ์ฌ ์ฌ์ฉํ์ต๋๋ค.
๊ณต์ ๋ฌธ์์ ์ฌ์ฉ ์์
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
new daum.Postcode({
oncomplete: function(data) {
// ํ์
์์ ๊ฒ์๊ฒฐ๊ณผ ํญ๋ชฉ์ ํด๋ฆญํ์๋ ์คํํ ์ฝ๋๋ฅผ ์์ฑํ๋ ๋ถ๋ถ์
๋๋ค.
// ์์ ๋ฅผ ์ฐธ๊ณ ํ์ฌ ๋ค์ํ ํ์ฉ๋ฒ์ ํ์ธํด ๋ณด์ธ์.
}
}).open();
</script>
DaumPost.jsx
์ ํ๋ก์ ํธ์์ ์์ฑํ ์ฝ๋์ ๋๋ค.
๋ฒํผ๊น์ง ๋ชจ๋ ํฌํจํ์์ต๋๋ค.
import React from 'react';
import style from './DaumPost.module.css';
import { useDaumPostcodePopup } from 'react-daum-postcode'; // Daum ์ฃผ์ ๊ฒ์ ๊ด๋ จ hook
//์ฃผ์ api
const DaumPost = ({ setAddress }) => {
const postcodeScriptUrl = 'https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js';
const open = useDaumPostcodePopup(postcodeScriptUrl);
const handleComplete = (data) => {
let fullAddress = data.address;
let extraAddress = '';
let localAddress = data.sido + ' ' + data.sigungu;
if (data.addressType === 'R') {
if (data.bname !== '') {
extraAddress += data.bname;
}
if (data.buildingName !== '') {
extraAddress += (extraAddress !== '' ? `, ${data.buildingName}` : data.buildingName);
}
fullAddress = fullAddress.replace(localAddress, '');
fullAddress += (extraAddress !== '' ? ` (${extraAddress})` : '');
}
setAddress(fullAddress); // setAddress๋ฅผ ํธ์ถํ์ฌ ๋ถ๋ชจ ์ปดํฌ๋ํธ์ ์ํ๋ฅผ ์
๋ฐ์ดํธ
};
const handleClick = () => {
open({ onComplete: handleComplete });
};
return <div className={style.find_address_button} type="button" onClick={handleClick}>์ฃผ์๊ฒ์</div>;
};
export default DaumPost;
DaumPost.module.css
.find_address_button {
font-size: 1.2vh;
color: white;
background-color: #333;
/* ๋ฒํผ์ ๋ฐฐ๊ฒฝ ์์ */
border: none;
border-radius: 0.5vh;
cursor: pointer;
margin-left: 0.5vw;
/* ์
๋ ฅ ํ๋์ ๋ฒํผ ์ฌ์ด์ ๊ฐ๊ฒฉ */
transition: background-color 0.3s;
width: 10vh;
height: 4.2vh;
font-size: 1.5vh;
display: flex;
align-items: center;
justify-content: center;
}
.find_address_button:hover {
background-color: #5593ff;
/* ๋ฒํผ์ ๋ง์ฐ์ค๋ฅผ ์ฌ๋ ธ์ ๋์ ๋ฐฐ๊ฒฝ ์์ ๋ณ๊ฒฝ */
}
@media all and (min-width:1024px) and (max-width:1279px) {}
@media all and (min-width:768px) and (max-width:1023px) {}
@media all and (min-width:480px) and (max-width:767px) {}
@media all and (min-width:200px) and (max-width:479px) {}
์์ ๊ฐ์ ๋ฐฉ์์ผ๋ก ๋ค์ ์ฃผ์ API๋ฅผ ํ์ฉํ์ฌ ํ๋ก์ ํธ์ ์์ฑ๋๋ฅผ ๋์ผ ์ ์์ต๋๋ค.