이 앱에서는
장소를 고르는 것만이
장소를 업데이트할 수 있는 방법이 아닙니다
대신, 우리가 고른 장소들을
골라놓은 박스 안에서 다시 클릭해서 없앨 수도 있습니다
그리고 여기서 장소를 지울 수 있습니다
하지만 지금은 작동하지 않습니다
place는 아직
백엔드의 user-places.json 파일에 일부이기 때문에
저기서 지워지지 않을 겁니다
그럼 어떻게 할 수 있을까요?
장소가 지워져야 할 때
백엔드에 아무런 요청을 보내지 않으면 됩니다
쉽게 바꿀 수 있습니다
앱 파일(App.jsx)의
handleRemovePlace 함수 안에서
장소를 없애기 위해 백엔드에
요청을 보낼 수 있습니다
그리고 이걸 비동기 함수로 만들 수 있습니다
그리고 제가 미리 그렇게 해두었습니다
그리고 다시 최적의 업데이트를 실행할 수 있는데
먼저 상태를 업데이트 해주고
HTTP 요청을 보내는 겁니다
그러려면 다시 updateUserPlaces를 여기 불러주고
업데이트된 places를 백엔드에 보내줍니다
userPlace 상태를 사용한 다음
필터를 가져와서
여기에 고른 장소나 골랐던 장소와
똑같은 ID를 가진 장소를 필터링합니다
그리고 여기 레퍼런스에 저장됩니다
그러니까 지금 상태를 업데이트할 때와
똑같은 로직을 사용하고 있습니다
그 전에 이걸 await해주고 그다음 진행합니다
이 userPlaces 상태를
handleRemovePlace 안에서 사용하고 있기 때문에
이걸 의존성으로
useCallBack 의존성 배열에 추가해야 합니다
하지만 userPlaces 상태가 바뀌면
이 함수가 꼭 재생성되도록 해야 합니다
업데이트된 places 배열을 올바르게 백엔드로
보내는 것을 보장하기 위해 중요한 과정입니다
이제 물론, 전처럼 실패할 것입니다
그래서 이걸 다시 try-catch로 감싸줍니다
그리고 전처럼, 만약 실패한다면
변동사항을 복구시키고
사용자에게 에러 메시지를 보여줍니다
그래서 여기 userPlaces=이전 userPlaces로 정의해줍니다
그래야 복구했을 때 업데이트되기 전 정보를 쓰기 때문입니다
그리고 ErrorUpdatingPlaces 상태를 여기
message 속성을 가진 객체에 정의해줍니다
message는 error.message나
대체 문구인 '장소를 삭제하는 데 실패했습니다'로 정의합니다
이런 식으로 하면 됩니다
저장을 하고
이걸 열어서 장소를 지우면
잘 작동되는 것 같습니다
이 요청이 백엔드로 보내진 겁니다
하지만 제가 억지로 에러를 만들기 위해
다시 s를 추가해 보겠습니다
그리고 장소 하나를 고르고 저장해 볼 겁니다
저장을 하고
다시 돌아가서 그걸 지우려고 하면
에러가 발생하고 변동사항이 복구됩니다
잘 작동하는 것 같습니다
이제 이 장소들을 지워보겠습니다
그리고 마지막으로
이 앱에 추가돼야 할 것은
앱이 로딩됐을 때 사용자의 장소를
불러오는 로직을 사용하겠습니다
왜냐하면 여기선 지금 불러오고 있지 않기 때문입니다
지금은 절대 그 사용자 장소들은 불러오지 않습니다