[React]

kako-map API 사용중 DaumPostcodeEmbed 를 사용하여 모달창에서 주소를 검색했을때 그 주소가 input에 나타나고 그 input의 value 값을 받아와서 kako-map에 띄워주게끔 하려고 했는데,
이게 마음처럼 되지않아 6시간동안 4번정도 바꾸고 삽질한 결과

---

GlobalState

Globalstate를 사용해서 false,true를 감지하여 모달(DaumPostcodeEmbed)를 켜고끄고를 설정하기

---

UseForm

useForm 안에서 getValue,setValue를 사용해서 input의 값을 받아와 주소를 입력하면 set 되게끔 설정하기

  const { register, handleSubmit, watch, formState, getValues, setValue } =
    useForm<IFormData>({
      resolver: yupResolver(schema),
      mode: "onChange",
    });

• 모달을 켜고,끄고의 핸들링 함수안에서 사용했습니다

  const handleComplete = (value: any) => {
    setValue("useditemAddress", {
      address: value.address,
    });
    onToggleModal();
  };

저는 아래처럼 address랑 상세주소 input밖에 없어서 address만 getValue로 받아왔습니다.
상세주소는 마커의 영향을 받지 않을것 같아서 상품상세페이지에서만 register 안에서 꺼내기만 하면 되니까 다른건 넣지 않았습니다!

---

Getvalue

input박스
즉,

<Input01  type="text" register{register("useditemAddress.address")}/>
// react-hook-form 안에서는 input 컴포넌트를 불러오기 때문에 register를 props로 넙겨주기 위한 코드로 다를 수 있습니다.

이 register의 value 값을 가져 오겠다!! = getValue
이 value값을 함수안에 담아서 핸들링 하겠다 해서 담아주었습니다.

const address = getValues("useditemAddress.address");

---

onLoad (useEffect)

제일 중요한 포인트

/*script.onload = () => {
      window.kakao.maps.load(function () {
        const container = document.getElementById("map"); 
        const options = {

          center: new window.kakao.maps.LatLng(37.486739, 126.900467), 
          level: 3, 
        };

        const map = new window.kakao.maps.Map(container, options); // 지도 생성 및 객체 리턴

        const geocoder = new window.kakao.maps.services.Geocoder();

        // 주소로 좌표를 검색합니다
        geocoder.addressSearch(*/`address`, /*function (result, status) {
          // 정상적으로 검색이 완료됐으면
          if (status === window.kakao.maps.services.Status.OK) {
            const coords = new window.kakao.maps.LatLng(
              result[0].y,
              result[0].x
            );

            // 결과값으로 받은 위치를 마커로 표시합니다
            const marker = new window.kakao.maps.Marker({
              map,
              position: coords,
            });

            // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
            map.setCenter(coords);
            marker.setMap(map);
          }
        });
      });
    };
  }, */`[address]`);

수정한 부분이 잘 보이게 주석처리 했는데 value를 담은 address를 넣어주었고 이 함수가 변경될 때마다 리랜더링 되어라까지 선언해주었습니다.

---

presenter

presenter 주소 코드는 이렇게 형성되어 있습니다.

 <S.CoordinateBottom>
                  <S.InputName>주소</S.InputName>
                  <S.Address>
                    <Input01
                      placeholder="주소가 입력됩니다."
                      type="text"
                      register={register("useditemAddress.address")}
                    />
                    <button type="button" onClick={onToggleModal}>
                      주소검색
                    </button>
                    {isOpen && (
                      <Modal
                        visible={true}
                        onOk={onToggleModal}
                        onCancel={onToggleModal}
                      >
                        <DaumPostcodeEmbed onComplete={handleComplete} />
                      </Modal>
                    )}
                  </S.Address>
                  <Input01
                    placeholder="상세주소가 입력됩니다."
                    type="text"
                    register={register("useditemAddress.addressDetail")}
                  />
                </S.CoordinateBottom>

이제 위도 경도값을 가져와야겠네요..........