REACT 주소Code

1.Api를 다운받는다

yarn add react-daum-postcode

2. Api폴더에 js를 따로 생성해준다.

import React,{useContext} from 'react';
import DaumPostcode from "react-daum-postcode";
import { UserContext } from '../context/UserInfo';

//yarn add react-daum

const PopupPostCode = () => {
	// 우편번호 검색 후 주소 클릭 시 실행될 함수, data callback 용
  const context = useContext(UserContext);
  const {setAddr} = context; 

    const handlePostCode = (data) => {
        let fullAddress = data.address;
        let extraAddress = ''; 
        
        if (data.addressType === 'R') {
          if (data.bname !== '') {
            extraAddress += data.bname;
          }
          if (data.buildingName !== '') {
            extraAddress += (extraAddress !== '' ? `, ${data.buildingName}` : data.buildingName);
          }
          fullAddress += (extraAddress !== '' ? ` (${extraAddress})` : '');
        }
        console.log(data);
        console.log(fullAddress);
        console.log(data.zonecode);
      //fullAddress값은 주소 값으로 이를 context Api에 담아 회원가입 페이지 창에 기재한다.
        setAddr(fullAddress);    
    }
  
    return(
      //닫기창을 만들고 싶으면 여기에 생성하면 된다.
            <DaumPostcode  onComplete={handlePostCode} />
    );
}
 
export default PopupPostCode;

3. SignUp.js 에서 버튼 생성 및 컴포넌트를 작성한다.

 const context = useContext(UserContext);
 const {addr} = context; 

      //주소찾기 영역
    const [isPopupOpen, setIsPopupOpen] = useState(false)
    
	// 팝업창 열기
    const openPostCode = () => {
        setIsPopupOpen(true);
    }
     
	// 팝업창 닫기
    const closePostCode = (e) => {
        setIsPopupOpen(false);

    }
    
        <div className="addr">
                <label className="addrLabel" >주소</label>
                <br />
                <input type="text" className="addrInput" value={addr}/>
                <br />
                <button className="addrBtn" onClick={openPostCode}>주소 찾기</button>
                <div id='popupDom'>
                {isPopupOpen && (                    
                        <PopupPostCode onClose={closePostCode} />
                 )} 
                 </div>                
            </div>

5. 해당 addr 값은 중괄호 없이 Axios Api로 넘겨 DB에 넣을 수 있다.

수정 23-05-19

**

주소를 최종 선택 후 다시 주소 찾기 버튼을 누르면 실행이 되지 않는 경우가 발생했다

이에 코드를 수정함.

import React,{useContext} from 'react';
import DaumPostcode from "react-daum-postcode";
import { UserContext } from '../context/UserInfo';


const PopupPostCode = (props) => {
	  // 우편번호 검색 후 주소 클릭 시 실행될 함수, data callback 용
    const context = useContext(UserContext);
    const {setAddr} = context; 

    const handlePostCode = (data) => {
        let fullAddress = data.address;
        let extraAddress = ''; 
        
        if (data.addressType === 'R') {
          if (data.bname !== '') {
            extraAddress += data.bname;
          };
          if (data.buildingName !== '') {
              extraAddress += (extraAddress !== '' ? `, ${data.buildingName}` : data.buildingName);
          };
          fullAddress += (extraAddress !== '' ? ` (${extraAddress})` : '');
        };
        console.log(data);
        console.log(fullAddress);
        console.log(data.zonecode);
        setAddr(fullAddress);
        props.onClose();
    };
  
    return(
      <div>
      <DaumPostcode onComplete={handlePostCode} />
      </div>
  )
}
 
export default PopupPostCode;

부모 페이지(SignUp.js)에서 넘겨준 값을 다 닫아주어야 해당 Api 가 완전히 종료되어진다.

이 후 다시 주소 찾기 버튼을 클릭하면 새롭게 Api를 시작하여 주소를 받아 올 수 있다.