[TIL] 1차 프로젝트 기억하고 싶은 코드 2. Daum 우편번호 구현하기

정육각 logo

◎ 1차 프로젝트 정육각에서 주문하기 페이지에 우편번호 검색 기능이 있다.

구글링 해본 결과 react-daum-postcode 라이브러리를 사용하면 구현할 수 있다고 나와있어서

설치 후 정육각에 맞게 코드를 구현하였다.

1. 준비

npm install --save react-daum-postcode

2. AddressModal.js(전체적인 코드는 길기 때문에 postcode에 대한 코드만 편집해서 올림.)

import React, { Component } from 'react';
import DaumPostCode from 'react-daum-postcode';
import './AddressModal.scss'
class AddressModal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: "",
            phone: "",
            address: "",
            zoneCode : "",
            fullAddress : "",
            isDaumPost : false,
            isRegister : false,
            register: [],
        }
    }

    handleOpenPost = () => {
        this.setState({
            isDaumPost : true
        })
    }

    // postcode
    handleAddress = (data) => {
        let AllAddress = data.address;
        let extraAddress = ''; 
        let zoneCodes = data.zonecode;
        
        if (data.addressType === 'R') {
          if (data.bname !== '') {
            extraAddress += data.bname;
          }
          if (data.buildingName !== '') {
            extraAddress += (extraAddress !== '' ? `, ${data.buildingName}` : data.buildingName);
          }
          AllAddress += (extraAddress !== '' ? ` (${extraAddress})` : '');
        }
        this.setState ({
            fullAddress: AllAddress,
            zoneCode : zoneCodes
        })
      }

    render() {
        const { isModalShow, isModalClose } = this.props;
        const { name, phone, address, isDaumPost, fullAddress, zoneCode, isRegister } = this.state;
        // DaumPostCode style
        const width = 595;
        const height = 450;
        const modalStyle = {
            position: "absolute",
            top: 0,
            left: "-178px",
            zIndex: "100",
            border: "1px solid #000000",
            overflow: "hidden"
        }
        return (
              <div className="modalRow">
                  <div className="modalCell cellTit">
                      <div>
                          <span><b>*</b>주소</span>
                      </div>
                  </div>
                  <div className="modalCell">
                      <div className="cellFirst">
                          <div className="zipCode">{zoneCode}</div>
                          <button type="button" onClick={this.handleOpenPost} >
                              <span>우편번호 찾기</span>
                          </button>
                      </div>
                      {
                          isDaumPost ?
                              <DaumPostCode
                                  onComplete={this.handleAddress}
                                  autoClose
                                  width={width}
                                  height={height}
                                  style={modalStyle}
                                  isDaumPost={isDaumPost}
                          		/>
                          : null
                      }
                      <div className="address">{fullAddress}</div>
                      <div className="addressBox">
                          <input type="text" value={address} name="address" onChange={this.handleInput}/>
                      </div>
                  </div>
              </div>
        );
    }
}

export default AddressModal;

 

• 우편번호 찾기 버튼을 눌렀을 때, handleOpenPost 함수가 실행되어 isDawmPost state 값이 true로 변경되어 우편번호 입력할 수 있는 DawmPostCode 컴포넌트가 실행된다.

• onComplete를 this.handleAddress 함수로 실행시킨다.

• 전체 주소를 allAddress 변수명에, 우편번호를 zoneCodes 변수명에 담은 다음 그 값들을 fullAddress와 zoneCodes state의 값으로 설정한다.

• 주소를 검색하고 선택을 하면 선택한 값을 화면에 나타내야 하므로 state값을 렌더링 한다.

• 정육각에 맞게 style을 정해준다. 

• width와 height은 따로 정해주고 별도의 csss는 DaumPostCode의 style 속성을 이용하여 작성한다.

3. 결과

4. 느낀 점

◎ 처음 PostCode를 해보았는데, npm install 만 했을 뿐 모든 기능이 되어서 놀랬다.

이 기능을 직접 구현하려고 했는데.. 직접 구현했으면 큰일 날뻔했다.

물론 상세한 거는 직접 코드를 쳐서 구현해야 하는데 라이브러리를 사용하면 쉽게 구현할 수 있다는 걸 깨달았다.

그렇다고 너무 라이브러리에 의존하면 안 된다!

※ 참조

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

react-daum-postcode