☑️ 리뷰수정시 수정한 내용 저장하는 기능 수정하기
- localStorage에 수정사항이 반영이 안되는 문제가 있는것 같으므로 이 부분 수정
admin페이지 잘 작동하는지 테스트하던중에,
리뷰 수정 후 저장하는 순간에는 화면이 바뀌는데, 새로고침하면 다시 수정전 화면으로 돌아오는 문제가 있었다. localStorage를 확인해보니, 거기도 바뀌지않는 문제가 있어서 예상컨대, 수정된 내용을 localStorage에 반영하지 않아서 발생하는 문제같았다.
handleUpdateReview 함수에서 updateReview를 호출하고 있지만, localStorage에 저장된 리뷰 데이터를 업데이트하는 로직이 제대로 작동하지 않는것 같았다.
찾아보니, 수정전 코드에는 localStorage에 수정사항을 반영하는 로직이 없었다.
localStorage는 명시적으로 localStorage.setItem을 호출해야만 업데이트된다.
이전에는 localStorage.setItem을 호출하지 않았기 때문에, 새로고침하면 localStorage에 저장된 이전 데이터가 다시 로드되었던것이다. localStorage에 해당 저장하는 부분을 추가하였다.
수정후
const handleUpdateReview = () => {
...
// 리뷰 데이터 업데이트
const storedReviews = JSON.parse(localStorage.getItem("reviews") || "[]");
const updatedReviews = storedReviews.map((review) =>
review.id === editingReviewId
? {
...review,
content: editingContent,
date: new Date().toISOString(), // 수정된 날짜 업데이트
}
: review
);
// localStorage에 저장
localStorage.setItem("reviews", JSON.stringify(updatedReviews));
// 상태 업데이트
setReviews(
updatedReviews.filter((review) => review.shopId === Number(shopId))
);
... }☑️그럼에도 리뷰수정시 UI는 즉시 변경되던 이유
그렇다면 왜 수정-저장 버튼을 누르면 화면UI는 변경이 되었던 걸까?
UI가 바로 바뀌었던 이유는 React의 상태 관리(useState) 때문이다. React는 상태가 변경되면 해당 상태를 사용하는 컴포넌트를 다시 렌더링하기 때문에, localStorage가 업데이트되지 않아도 UI는 즉시 변경된 상태를 반영할 수 있다.
✔️ 동작 원리
1. React 상태 관리 (useState)
: setEditingContent와 setReviews를 호출하면 React는 상태를 업데이트하고, 상태를 사용하는 컴포넌트를 다시 렌더링한다.
이로 인해, reviews 상태가 변경되면 UI가 즉시 업데이트된다.
- localStorage와 React 상태의 차이
: localStorage는 브라우저의 저장소로, 데이터를 영구적으로 저장한다.
React 상태는 메모리에 저장되며, 컴포넌트가 렌더링되는 동안만 유지된다.
React 상태가 변경되면 UI는 즉시 업데이트되지만, localStorage는 명시적으로 업데이트하지 않으면 변경되지 않는다.
3.UI가 즉시 변경된 이유
: handleUpdateReview 함수에서 setReviews를 호출하여 React 상태를 업데이트했기 때문이다. 예를 들어
setReviews(
updatedReviews.filter((review) => review.shopId === Number(shopId))
);이 코드가 실행되면 reviews 상태가 업데이트되고, React는 이를 기반으로 UI를 다시 렌더링한다.
✔️정리
React 상태와 localStorage를 동기화하려면, 상태를 업데이트할 때 localStorage도 함께 업데이트해야 한다. 이를 위해 localStorage.setItem을 추가했다. 이제 React 상태와 localStorage가 일관성을 유지하는 코드가 되었다.
