[사용법] SearchMap

[heejin0421]

Description

SearchMap.jsx

### 기능 설명 - 지도에서 도로명주소/ 상호명으로 위치 검색 - 현재 위치 클릭시 지도상에 마커로 표현 #### 컴포넌트화를 시켰을때 문제점 발생 - 공용으로 사용하기 위해 지도 기능을 컴포넌트화를 시킬려고합니다.
**saveAddressHandler** 부분에서 data.targetName/ data.targetAddress 를 동기적으로 변환해주고싶은데
해결방법이 떠오르지않아서 혹시 방법을 아시는 분은 답변 부탁드립니다. ```javascript const SearchStoreMap = ({ setIndex, setData, data }) => { const [inputText, setInputText] = useState(''); const [place, setPlace] = useState(''); const [markerInfo, setMarkerInfo] = useState(''); console.log('markerInfo', markerInfo); //내가 선택한 마커 저장소 const [selectMarker, setSelectMarker] = useState(false); //나의 현재위치 좌표 저장소 const [myLocation, setMyLocation] = useState(''); //선택한 마커의 좌표 const [distance, setDistance] = useState(''); //나의 현재위치와 선택한 마커 사이의 거리 저장소 // 위치 가져오기 버튼 클릭시 const getCurrentPosBtn = () => { if (navigator.geolocation) { // GPS를 지원하면 navigator.geolocation.getCurrentPosition( (position) => { setMyLocation({ latitude: position.coords.latitude, longitude: position.coords.longitude, }); }, (error) => { console.error(error); }, { enableHighAccuracy: true, maximumAge: 0, timeout: Infinity, } ); } else { alert('GPS를 지원하지 않습니다'); } }; const onChange = (e) => { setInputText(e.target.value); }; const onClickHandler = (e) => { e.preventDefault(); setPlace(inputText); setInputText(''); }; const saveAddressHandler = () => { const storeName = document.getElementById('storeName'); const storeAddress = document.getElementById('storeAddress'); setData({ ...data, targetName: storeName.innerHTML, targetAddress: storeAddress.innerHTML, }); setIndex(0); }; ```

[JMKiim]

전해주고싶은 key값 문자열을 props로 받아오고 arr[${props.name}] = ~~ ; 이런식으로 미리 배열을 선언해두고 setter로 덮어주면 될거같습니다.

그리고 innerHTML말고 textContent로 대체해보는건 어떨까요?

[heejin0421]

@JMKiim

  const saveAddressHandler = () => {
    const storeName = document.getElementById('storeName');
    const storeAddress = document.getElementById('storeAddress');

    const tempArr = { ...data };
    tempArr[`${name}`] = storeName.textContent;
    tempArr[`${address}`] = storeAddress.textContent;
    console.log('tempArr', tempArr);
    setData(tempArr);
    setIndex(0);
  };

이렇게 수정하니깐 정상적으로 작동하네요 감사합니다. 찾아보니 innerHTML 보다 textConetent를 사용하는게 보안과 성능적으로 좋다고하네요!

[JMKiim]

https://velog.io/@raram2/%EB%8B%B9%EC%8B%A0%EC%9D%B4-innerHTML%EC%9D%84-%EC%93%B0%EB%A9%B4-%EC%95%88%EB%90%98%EB%8A%94-%EC%9D%B4%EC%9C%A0

참고하시면 될 것 같습니다!