[React] 카카오 주소찾기 api 사용하기

 과제를 하면서 알게 되었는데 리액트에서는 생각보다 간편하게 사용할 수 있다.

 

간편 정리

1. react-daum-postcode 설치하고

2. 원하는 곳에 import 하고

3 임포트해온 컴포넌트를 배치하고 원하는 상황에 맞는 prop를 넣어서 한다.(해당 내용 아래 참고자료에있음)

---

npm install react-daum-postcode
# or
yarn add react-daum-postcode

 

우선 이걸 깔고, 원하는 위치에 임포트하면 된다.

나 같은 경우는 input창을 클릭했을 시에 이 주소찾기 페이지가 떠야 했다. 처음엔 주소입력 컴포넌트에 하위에 넣었는데, 모달로 하는게 나을 것 같아서 모달로 띄우게 했다. 

 

 

포탈 사용해서 그냥 띄우고싶을 때 컴포넌트 내에서 띄울수 있도록 했다.

const SearchInput = () => {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <>
      <Label htmlFor="address">거주건물</Label>
      <InputWrapper>
        <Input
          type="text"
          onClick={()=>setIsOpen(true)}
        />
      </InputWrapper>
      {isOpen && <KaKaoFindAddress setIsOpen={setIsOpen} />}
    </>
  );
};

useState를 이용해서 클릭할 때 모달이 열리도록 &&연산자를 이용하였고, setIsOpen을 props로 성공했을 시  닫히도록 했다 

import ModalPortal from './ModalPortal';
import DaumPostcode from 'react-daum-postcode';
import styled from 'styled-components';
const KaKaoFindAddress = ({ setIsOpen }: { setIsOpen: (open: boolean) => void }) => {

  return (
    <ModalPortal>
      <PostCodeWrapper>
        <DaumPostcode
          onComplete={({ roadAddress }) => {// 성공했을때, parameter는 객체분해할당를 이용해서 roadAddress만 
         
            setIsOpen(false);
          }}
          autoClose={false} // default값이 닫히는건데, 상태 관리를 위해 false로 두고 따로 성공하면 닫기
          style={{ width: '100%', height: '100%', marginTop: '40px' }}// 스타일도 넣을 수 있다 최고다
        />
      </PostCodeWrapper>
    </ModalPortal>
  );
};

 

제출 1시간전에 한거라  생각나는건 포탈밖에 없어서 후다닥 했던 기억이난다. 리액트에선 생각보다 간단했다 나중에 쉽게 사용할 수 있을듯 하다

 

---

참고자료

https://www.npmjs.com/package/react-daum-postcode

react-daum-postcode

https://postcode.map.daum.net/guide#attributes

Daum 우편번호 서비스