React | 다음 우편번호 검색 서비스 (react-daum-postcode)

실제 사용 모습

1. react-daum-postcode install

$ npm install react-daum-postcode

 

2. 주소 검색을 이용할 컴포넌트에 import

import DaumPostcode from 'react-daum-postcode';

 

3. 필요에 맞게 커스텀하여 사용

 

• onComplete : 사용자가 주소를 검색 후 특정 주소를 클릭하였을 때 발생하는 이벤트
• style: css커스텀을 위한 props

이런식으로 사용하면 된다... 엄청 편리함!

const FindAddr = () => {

    const postCodeStyle = {
      display: "block",
      position: "absolute",
      top: "50px",
      zIndex: "100",
      padding: "7px"
    }
    
	return (
    	<DaumPostcode 
          onComplete={handleComplete}
          style={postCodeStyle}
          height={700}
        />
    )
}

export default FindAddr;

 

+ 참고 | 더 많은 props가 있습니다.

react-daum-postcode