필터링 완료

src/App.js

@@ -17,8 +17,8 @@ export default function App () {
     }
 
     const toggleFavorite = (id, name) => {//좋아요와 스낵바 상태 업데이트
-        setLikes({...likes, [id]: !likes[id]});//기존의 모든 키-값 쌍을 복사한다음 뒤에 써져있는대로 업데이트함
-        setSnackState({...snackState, open: true, msg: `${name} is clicked`})
+        setLikes(prevLikes => ({...prevLikes, [id]: !prevLikes[id]}));//기존의 모든 키-값 쌍을 복사한다음 뒤에 써져있는대로 업데이트함
+        setSnackState({open: true, msg: `${name} is clicked`})
     }
 
     const handleSnackbarClose = (event, reason)=> {//스낵바 닫기

src/Favorites.js

@@ -11,8 +11,11 @@ import React from 'react';
 import MusicList from './MusicList';
 
 const Favorites = ({list, likes, toggleFavorite}) => {
+
+  const favList = list.filter(item => likes[item.collectionId])//filter함수를 이용하여 좋아요 한 노래들만 필터링해서 favList에 집어넣기
+
   return (
-      <MusicList list={list} likes={likes} toggleFavorite={toggleFavorite}/>
+      <MusicList list={favList} likes={likes} toggleFavorite={toggleFavorite}/>
   );
 }
 

src/SnackMsg.js

@@ -11,7 +11,7 @@ const SnackMsg = (props) => {
             onClose = {props.onClose}
             message = {props.message}>
         </Snackbar>
-    )
+    );
 }
 
 export default SnackMsg;
\ No newline at end of file