안녕하세요

컴포넌트를 로드할 때 localStorage.getItem을 이용하여 저장된 목록을 불러옵니다. // 로컬에 my list 저장 useEffect(() => { const savedList = JSON.parse(localStorage.getItem("myList")); if (savedList) { setMyList(savedList); } }, []); myList를 업데이트 할 때마다 localStorage.setItem을 이용하여 목록을 저장합니다. useEffect(() => { localStorage.setItem("myList", JSON.stringify(myList)); }, [myList]); 전체 노래 목록에서 삭제를 하면 myList에서도 삭제되도록 합니다. const handleC..

재생중인 리스트 태그를 선택할 ref를 만듭니다. const currentSongRef = useRef(null); 현재 재생중인 노래 리스트를 ref={currentSongRef} 로 선택합니다. handleClickSong(song)} ref={currentSong === song ? currentSongRef : null}> 선택된 태그를 scrollIntoView 메서드로 block:"center"로 이동시킵니다. useEffect(() => { if (currentSongRef.current) { currentSongRef.current.scrollIntoView({ behavior: "smooth", block: "center", }); } }, [currentSongRef, currentSo..

하나의 playlist는 모두 한 명의 artist의 노래로만 구성되었다는 전제입니다. 1. 가수 정보를 추가합니다. // 가수 데이터를 추가한 뒤 노래 배열 반환 const allSongs = singerData .map((singer) => { const songs = singer.songList.map((song) => { const singerName = song.snippet.channelId === "UCXXXXX" ? "name1" : "name2"; return { ...song, singer: singerName }; }); return [...songs]; }) .flat(); => playlist에 담긴 노래 리스트마다 singerName 프로퍼티를 추가합니다. 2. 어느나라의 노래인..

[렌더링할 데이터 불러오기] 1. App을 실행하면 노래 정보를 불러와 reducer에 저장합니다. function App() { const dispatch = useDispatch(); useEffect(() => { (async () => { const songsResult = await axios.get("/api/songs"); dispatch(setSongs(songsResult.data)); })(); }, [dispatch]); 2. 노래 정보를 useSelector로 불러오고 이를 저장할 state를 만듭니다. const singerData = useSelector((state) => state.songs); const [playlist, setPlaylist] = useState([]);..