[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>

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