Today I Learned

오늘 한일✅

• 게시글 수정시 지도 값을 가져오는 코드를 구현했다.

구현 방법✅

게시글 수정시 지도 값 가져오자

1. 일단 postEditpage에 state.Address_Posting,state.MeetLatitude_Posting, state.MeetLongitude_Posting 주소와 경도 위도의 값을 넘겨준다.

// postEditpage.tsx

<InputInformationEdit
          addressEdit={state.Address_Posting}
          lat={state.MeetLatitude_Posting}
          lng={state.MeetLongitude_Posting}
        />

2. InputInformation.tsx의 구조이다.

// 현재 위치를 가져오기 위한 state 생성
  const [myLoca, setMyLoca] = useState({ lat: 36.5, lng: 127.8 });
// const [myLoca, setMyLoca] = useRecoilState(myLocation);

// 지도 좌표를 저장할 state   (o)
 const [position, setPosition] = useRecoilState(myLocation);


  // input value 를 가져오기 위한 state
  const [search, setSearch] = useState('');

  const onChange = (e) => {
    setSearch(e.target.value);
  };

3. props로 받아온 lat={state.MeetLatitude_Posting},lng={state.MeetLongitude_Posting} 값을
   넣어준다.

// InputInformationEdit.tsx
// 현재 위치를 가져오기 위한 state 생성
  const [myLoca, setMyLoca] = useState({ lat, lng });

//콘솔로그 찍어보면 db에 올라간 경도와 위도가 잘 찍힌다.

 // console.log(myLoca);

4. 현재 수정할 글에서 선택한 위도와 경도가 콘솔로그 myLoca와 postiton에 잘들어온다.
   

 // 현재 위치를 가져오기 위한 state 생성
  const [myLoca, setMyLoca] = useState({ lat, lng });
  //console.log(myLoca);


  // 지도 좌표를 저장할 state   (o)
  const [position, setPosition] = useRecoilState(myLocation);

  // db에 올라간 위치가 불러질때 myloca(db에 올라간 위치)를 setPostiton 함수에 넣는 로직
  useEffect(() => {
    setPosition(myLoca);
  }, [myLoca]);

  //console.log(position);

5. 원래 현재 주소값을 입력창에 띄어주게 만들었다.
   아래 코드처럼 state.Address_Posting을 가져와서 db에 올라간 주소를 입력창에 띄어주는데 우리는 게시글 작성부터 그러지 않기 때문에 InputInformation.tsx 빈값으로 두었다.

// InputInformatin.tsx
 // input value 를 가져오기 위한 state
  const [search, setSearch] = useState(addressEdit);

  // console.log(addressEdit);
  const onChange = (e) => {
    setSearch(e.target.value);
  };

// InputInformatinEdit.tsx
 // input value 를 가져오기 위한 state
  const [search, setSearch] = useState('');

  const onChange = (e) => {
    setSearch(e.target.value);
  };

알게 된점✅

• 신기하군..