react-daum-postcode 코드 개선

이종민·2021년 7월 17일
0

개인의견

목록 보기
2/2
post-thumbnail

프로젝트를 진행하며 react-daum-postcode
를 설치하여 사용하였다. 위의 링크에 들어가서 확인 해보면 안에 'handleComplete' 함수를 볼 수 있다. 개인적으로 이 함수를 좀 더 알아보기 쉽게 개선해보았다.
위는 내가 수정해 본 버전이며 아래는 링크의 원본코드이다.

//내가 바꾼 코드
  const handleComplete = data => {
    const {
      address,
      jibunAddress,
      zonecode,
      userSelectedType,
      bname,
      buildingName,
    } = data;

    const isAddress = userSelectedType === 'R';

    const roadAddress = `${address} (${bname ? bname : ''} ${
      buildingName ? buildingName : ''
    })`;

    const oldAddress = `${jibunAddress} (${bname ? bname : ''} ${
      buildingName ? buildingName : ''
    })`;

    setAddress(isAddress ? roadAddress : oldAddress, zonecode);
  };

  setAddress = (allAddress, zoneCodes) => {
    this.setState({
      address: allAddress,
      zip: zoneCodes,
    });
  };

//기존 링크의 코드
  const handleComplete = (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(fullAddress);  // e.g. '서울 성동구 왕십리로2길 20 (성수동1가)'
  }

✅ 코드 설명

다음 포스트코드 가이드 링크의 가이드를 보며 구조분해할당을 해주었다.

    const {
      address,
      jibunAddress,
      zonecode,
      userSelectedType,
      bname,
      buildingName,
    } = data;

'도로명 주소'와 '지번 주소'를 모두 입력해야함으로 'isAddress' 를 선언하였다.
주소타입은 'R' 과 'J' 두가지이며 'R' 은 도로명 주소, 'J'는 지번 주소이다.

    const isAddress = userSelectedType === 'R';

'roadAddress' 는 도로명 주소를 표현하는 것이다.

    const roadAddress = `${address} (${bname ? bname : ''} ${
      buildingName ? buildingName : ''
    })`;

위 코드는 가이드에 따라 address 는 기본 도로명 주소이며 bname 이 존재하면 bname 을 주소에 넣고 없으면 공백, 건물명이 있다면 주소에 넣고 없으면 공백이다.

    const oldAddress = `${jibunAddress} (${bname ? bname : ''} ${
      buildingName ? buildingName : ''
    })`;

'oldAddress' 는 지번주소 이며 도로명 주소와 같이 bname 이 존재하면 bname 을 주소에 넣고 없으면 공백, 건물명이 있다면 주소에 넣고 없으면 공백이다.

isAddress ? roadAddress : oldAddress, zonecode

삼항연산자를 통해 isAddress 가 'R' 이면 도로명 주소를 표시하고 그렇지 않다면 지번 주소를 표시한다.

0개의 댓글