리뷰수정내용 반영 안됨
admin페이지 잘 작동하는지 테스트하던중에,
리뷰 수정 후 저장하는 순간에는 화면이 바뀌는데, 새로고침하면 다시 수정전 화면으로 돌아오는 문제가 있었다. localStorage를 확인해보니, 거기도 바뀌지않는 문제가 있어서 예상컨대, 수정된 내용을 localStorage에 반영하지 않아서 발생하는 문제같았다.
handleUpdateReview 함수에서 updateReview를 호출하고 있지만, localStorage에 저장된 리뷰 데이터를 업데이트하는 로직이 제대로 작동하지 않는것 같았다.
수정전
const handleUpdateReview = () => {
if (!editingContent.trim()) {
alert("리뷰를 입력해주세요");
return;
}
updateReview(shopId, editingReviewId, editingContent);
setReviews(
reviews.map((review) =>
review.id === editingReviewId
? {
...review,
content: editingContent,
date: new Date().toISOString(),
}
: review
)
);
setEditingReviewId(null);
setEditingContent("");
};
수정전 코드에는 localStorage에 수정사항을 반영하는 로직이 없다.
localStorage는 명시적으로 localStorage.setItem을 호출해야만 업데이트된다.
이전에는 localStorage.setItem을 호출하지 않았기 때문에, 새로고침하면 localStorage에 저장된 이전 데이터가 다시 로드되었던것이다.
수정후
const handleUpdateReview = () => {
if (!editingContent.trim()) {
alert("리뷰를 입력해주세요");
return;
}
// 리뷰 데이터 업데이트
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))
);
// 수정 상태 초기화
setEditingReviewId(null);
setEditingContent("");
};그럼에도 UI는 즉시 변경되던 이유
그렇다면 왜 수정-저장 버튼을 누르면 화면UI는 변경이 되었던 걸까?
UI가 바로 바뀌었던 이유는 React의 상태 관리(useState) 때문이다. React는 상태가 변경되면 해당 상태를 사용하는 컴포넌트를 다시 렌더링하기 때문에, localStorage가 업데이트되지 않아도 UI는 즉시 변경된 상태를 반영할 수 있다.
동작 원리
-
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가 일관성을 유지하는 코드가 되었다.
네비게이션 리뷰갯수 출력 오류 수정하기
업체에 들어가면, 네비게이션 탭이 총 4개가 있는데, 2개에서만 리뷰 갯수가 제대로 나오는 오류가 있음.
홈, 디자이너, 스타일, 리뷰 에서 홈과 리뷰 페이지만 맡아서 나머지 페이지는 손대지 않았더니 리뷰개수가 떠야할 괄호안에 undefined라고 출력되는 문제가 있었다.
스타일 페이지를 예를 들자면 아예 네비게이션 출력 부분에 reviewCount항목자체가 없었다.
style/[id] 페이지에서 표시되는 ShopDetailNavigation에도 reviewCount항목을 추가한다.
그리고 reviews가 없기때문에, 여기서는 localStorage에서 reviews를 getItem으로 불러온뒤에, 그 review 중에 shopId가 일치하고 && review status 가 published 인것만 filtering 하고. 그 배열의 길이만큼 화면에 표시한다.
[스타일id 페이지]
<ShopDetailNavigation
shopId={params?.id}
activeTab="styles"
reviewCount={
JSON.parse(localStorage.getItem("reviews") || "[]").filter(
(review) =>
review.shopId === Number(params?.id) &&
review.status === "published" // "published" 상태의 리뷰만 포함
).length
}
/>[리뷰id 페이지]
{/* 네비게이션 바 */}
<ShopDetailNavigation
shopId={shopId}
activeTab="review"
reviewCount={
reviews.filter((review) => review.status === "published").length || 0
} // "published" 상태의 리뷰만 계산
/>결론적으로 이제 디자이너, 스타일탭에서도 리뷰() 개수가 잘 표시된다.
localStorage 에러
디자이너까지는 잘 수정했는데, 스타일탭에서 수정을 하니까 갯수가 표시되긴하는데, localStorage가 정의되지않았다는 오류가 같이뜬다..?
⨯ ReferenceError: localStorage is not defined
at ShopStylesPage (src\app\shops[id]\styles\page.js:64:21)
62 | activeTab="styles"
63 | reviewCount={
64 | JSON.parse(localStorage.getItem("reviews") || "[]").filter(
| ^
65 | (review) =>
66 | review.shopId === Number(params?.id) &&
67 | review.status === "published" // "published" 상태의 리뷰만 포함 {
digest: '2708946426'
}
는.. 해프닝이었나? 다시 껏다키니까 사라졌다.
