배열을 불변하게 업데이트하고 React의 로컬 저장소에 저장하는 방법은 무엇입니까?

Question

레시피 앱을 만들고 있어요. 사용자가 즐겨찾기 목록에 레시피를 추가할 수 있었으면 좋겠습니다. 3개의 React 구성요소가 관련되어 있습니다. 레시피, 즐겨찾기 및 즐겨찾기에 추가하세요.

레시피 구성 요소는 선택한 레시피에 대한 다양한 세부 정보를 표시합니다.

AddToFavorites 구성 요소는 Recipe 구성 요소 내에서 렌더링되는 버튼입니다.

즐겨찾기 구성요소는 "즐겨찾기에 추가" 버튼을 사용하여 즐겨찾기에 추가된 모든 항목을 표시하는 목록입니다.

으아아아 으아아아 으아아아

지금까지 시도한 것:

• API 데이터를 레시피의 "세부정보" 속성으로 AddToFavorites에 전달합니다.
• AddToFavorites에서 즐겨찾기를 기본적으로 빈 배열로 설정하세요.
• AddToFavorites에 onClick 이벤트를 추가하여 AddToFavorites() 함수를 호출하는 즐겨찾기 btn에 추가합니다.
• AddToFavorites() 함수에서 스프레드 연산자를 사용하고 수신된 세부정보 소품(API 데이터 포함)을 상태 배열의 새 복사본에 새 항목으로 추가한 다음 로컬 저장소에 저장하여 즐겨찾기 상태를 영구적으로 업데이트하려고 합니다.

즐겨찾기에 항목을 추가할 때 하나의 항목을 추가할 수도 있고 여러 번 추가할 수도 있습니다. 하지만 새 레시피로 이동하여 다른 항목을 추가하면 이전 항목이 삭제되고 다시 시작됩니다.

며칠 동안 이것저것 알아보고 이것저것 시도해 보았지만 알 수 없습니다.

Answer 1

이것은 공유 상태의 좋은 예인 것 같습니다. 즐겨찾기 데이터를 한 곳에서 관리하면 추가, 삭제, 표시 시 동기화 문제가 발생하지 않습니다.

컨텍스트 생성을 권장합니다

으아아아

그런 다음

와 같은 컨텍스트 제공자로 애플리케이션의 관련 부분을 래핑합니다. 으아아아

즐겨찾기를 읽거나 수정해야 할 때마다 컨텍스트 후크를 사용하세요

으아아아

---

Redux와 같은 다른 형태의 상태 관리를 사용할 수도 있습니다.