Today I Learned

dbsskdud60·2023년 3월 18일
0

내일배움캠프

목록 보기
108/120
post-thumbnail

오늘 한일✅

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

구현 방법✅

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

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

<InputInformationEdit
          addressEdit={state.Address_Posting}
          lat={state.MeetLatitude_Posting}
          lng={state.MeetLongitude_Posting}
        />
  1. 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);
  };
  1. props로 받아온 lat={state.MeetLatitude_Posting},lng={state.MeetLongitude_Posting} 값을
    넣어준다.
// InputInformationEdit.tsx
// 현재 위치를 가져오기 위한 state 생성
  const [myLoca, setMyLoca] = useState({ lat, lng });

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

 // console.log(myLoca);

  1. 현재 수정할 글에서 선택한 위도와 경도가 콘솔로그 myLocapostiton에 잘들어온다.
 // 현재 위치를 가져오기 위한 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);
  1. 원래 현재 주소값을 입력창에 띄어주게 만들었다.
    아래 코드처럼 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);
  };

알게 된점✅

  • 신기하군..
profile
ur gonna figure it out. just like always have.

0개의 댓글