[React] 다음 주소 검색 사용하기 (with 모달 ) react-daum-postcode

react-daum-postcode 사용 방법

설치 

npm install react-daum-postcode

 

import

import DaumPostcode from "react-daum-postcode";

 

주소 검색 완료 함수 생성

• onComplete 함수에 주소 검색 완료 시 실행시킬 로직을 바인딩한다.
• Address 타입의 주소(data)를 인자로 받을 수 있다. 
  (Address 타입은 react-daum-postcode에서 import 한다.)
• 완료 함수 실행 시 주소창은 자동으로 사라진다.

 

• data 예시

react-daum-postcode data 예시

 

사용 예시 (with Antd 모달)

import DaumPostcode from "react-daum-postcode";
import { Modal, Button } from "antd";

// 주소 검색 모달
const onToggleModal = () => {
  setIsOpen((prev) => !prev);
};

const handleComplete = (data) => {
  // 시.도 저장
  setQ1(data.sido);
  // 구.군 저장
  setQ3(
    data.sigungu.length > 3
      ? data.sigungu.split("").splice(0, 3).join("")
      : data.sigungu
  );

  // 상세주소 앞 2단어 제외하고 저장 ('서울 강남구' 제외하고 저장)
  let splitAddress = data.address.split(" ").splice(2).join(" ");
  setDetailaddress(splitAddress);
  onToggleModal(); // 주소창은 자동으로 사라지므로 모달만 꺼주면
};

{
  isOpen && (
    <Modal
      onOk={onToggleModal}
      onCancel={onToggleModal} // isOpen이 false가 되고 화면이 리렌더되면서 모달이 뜨지 않는다.
    >
      <DaumPostcode onComplete={handleComplete} />
    </Modal>
  );
}

 

모달과 함께 사용할 때 주의할 점
주소가 들어있는 모달을 닫았다가 다시 열면 주소 라이브러리가 나오지 않는다. (라이브러리 특성)
위의 코드는 다시 열었을 대 새롭게 열리도록 작성한 것이라서 문제가 되지 않는다.

---

모달을 켜고 끄는 방식 2가지

(모달을 사용하는 다른 경우에도 적용 가능, 두 가지 방법 중 상황에 맞게 사용하면 된다.)

 

1. 숨겼다가 다시 보여주기 (내용은 유지)

• visible={isOpen} isOpen이 true이면 모달을 보여준다.
• isOpen이 false일 경우 숨겨진 것 뿐이고 사라진 것은 아니다.
• 주소 라이브러리의 경우에는, 이렇게 하면 주소 UI가 다시 나오지 않는다.
• 입력한 내용이 유지되어야 하는 경우 사용한다. (ex. 이력서 작성)

      <Modal
        visible={isOpen}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <DaumPostcode onComplete={handleComplete} />
      </Modal>

사용시 주의할 점
visible 프로퍼티는 버전 문제로 더이상 지원하지 않는다.
visible을 사용해야 할 경우 버전을 낮춰 다운로드 하는 것을 권장한다.

 

2. 조건부 렌더링 ( = 삭제했다가 새로 만들기 💗 )

• visible={true} visible을 항상 true로 만든다.
• isOpen이 true일 때 Modal을 그리게 한다. (조건부 렌더링)
• isOpen이 false로 변경되면 화면이 리렌더되어 화면에 아예 그려지지 않는다. (삭제되지 않는다.)
• 입력한 내용이 삭제되어야 하는 경우 사용한다. (ex. 결제 정보, 비밀번호 입력)

{isOpen && (
        <Modal
          visible={true}
          onOk={handleOk}
          onCancel={handleCancel}
        >
          <DaumPostcode onComplete={handleComplete} />
        </Modal>
)}