프로젝트를 진행하며 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' 이면 도로명 주소를 표시하고 그렇지 않다면 지번 주소를 표시한다.