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

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

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

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

지금까지 시도한 것:

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

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

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