처음에는 saveReview함수를 만들어두고, handleAddReview에서 그것을 불러서 사용하는 형식이었다.
기능적으로는 문제가 전혀없었는데, 총댓글수 데이터를 새로고침없이 불러오는 기능을 추가하다보니 기존 기능도 수정이 필요했다.
두개의 기능은 동일하다. 다만 하나 차이가 있다.
새로운 코드는 바로 React상태를 업데이트하여 UI를 새로고침없이 갱신 할 수 있다는 점!
saveReview와 handleAddReview의 차이점
| 특징 | saveReview | handleAddReview |
|---|---|---|
| 역할 | 리뷰 데이터를 localStorage에 저장 | 리뷰 데이터를 추가하고 상태를 업데이트 |
| React 상태 관리 | React 상태(setReviews)와 직접적으로 연관되지 않음 | React 상태를 업데이트하여 UI를 새로고침 없이 갱신 |
| 재사용성 | 여러 곳에서 호출 가능 | 특정 이벤트 핸들러로 사용 |
| 현재 사용 여부 | 사용되지 않음 | 사용 중 |
주요 차이점
⭐handleAddReview는 setReviews를 사용하여 React 상태를 업데이트함.
React 상태가 업데이트되면 컴포넌트가 다시 렌더링되므로, 새로고침 없이도 UI에 변경 사항이 즉시 반영된다.
⭐localStorage만 사용하는 saveReview
saveReview는 단순히 localStorage에 데이터를 저장하는 함수.
React 상태를 업데이트하지 않으므로, UI에 변경 사항을 반영하려면 추가적인 작업(예: 상태 업데이트 또는 새로고침)이 필요함.
만약 setReviews를 호출하지 않고 localStorage에만 데이터를 저장한다면:
localStorage에는 데이터가 저장되지만, React 컴포넌트는 상태가 변경되었음을 알지 못하므로, UI가 업데이트되지 않음.
useEffect랑 관련이 있다!
첫 번째 useEffect: 매장 데이터와 리뷰 데이터 초기화
localStorage에서 매장 데이터(shops)와 리뷰 데이터(reviews)를 가져온다.
React 상태(setShop, setReviews)를 업데이트하여 UI 초기화
React 상태와 UI 렌더링: setShop과 setReviews가 호출되면 React는 컴포넌트를 다시 렌더링하여 UI를 최신 상태로 업데이트
두 번째 useEffect: 리뷰 데이터 동기화
localStorage에서 리뷰 데이터를 가져와 React 상태 (setReviews)를 업데이트
shopId가 변경될 때마다 실행
React 상태와 UI 렌더링: setReviews가 호출되면 React는 컴포넌트를 다시 렌더링하여 UI를 최신 상태로 업데이트합니다.
React 상태 업데이트와 useEffect의 상호작용
초기 렌더링:
컴포넌트가 처음 렌더링될 때 useEffect가 실행됩니다.
localStorage에서 데이터를 가져와 React 상태를 초기화합니다.
React 상태가 업데이트되면 컴포넌트가 다시 렌더링됩니다.
상태 변경:
handleAddReview 또는 handleDeleteReview가 호출되면 React 상태(setReviews)가 업데이트됩니다.
상태가 업데이트되면 컴포넌트가 다시 렌더링됩니다.
렌더링 이후, useEffect가 실행되어 데이터가 동기화됩니다.
shopId 변경:
shopId가 변경되면 useEffect가 실행되어 새로운 데이터를 가져옵니다.
React 상태가 업데이트되고, 컴포넌트가 다시 렌더링됩니다.
