Custom Hook을 활용한 음악 플레이리스트 구현

06 Nov 2023

reactjs

이번 포스트에서는 React에서 Custom Hook을 활용하여 음악 플레이리스트를 구현하는 방법을 살펴보겠습니다. Custom Hook은 React의 기능을 재사용하기 위해 만들어진 함수이며, 여러 컴포넌트에서 공유할 수 있습니다.

음악 플레이리스트 컴포넌트

우리는 음악 플레이리스트를 나타내는 Playlist 컴포넌트를 만들어보겠습니다. 이 컴포넌트는 노래 목록을 표시하고, 선택한 노래를 재생하는 기능을 갖고 있습니다.

import React from 'react';

const Playlist = ({ songs }) => {
  const [currentSong, setCurrentSong] = React.useState(null);
  
  const playSong = (song) => {
    setCurrentSong(song);
  };

  return (
    <div>
      <h1>음악 플레이리스트</h1>
      <ul>
        {songs.map((song, index) => (
          <li key={index} onClick={() => playSong(song)}>
            {song.title} - {song.artist}
          </li>
        ))}
      </ul>
      {currentSong && (
        <div>
          <h2>현재 재생 중인 곡</h2>
          <p>{currentSong.title}</p>
          <p>{currentSong.artist}</p>
        </div>
      )}
    </div>
  );
};

export default Playlist;

이 컴포넌트는 songs prop으로 전달받은 노래 목록을 표시하고, currentSong 상태를 통해 현재 재생 중인 노래를 표시합니다. playSong 함수는 노래를 선택하면 해당 노래를 현재 재생 중인 노래로 설정하는 역할을 합니다.

Custom Hook 생성하기

이제 Custom Hook을 생성하여 음악 플레이리스트를 다루는 로직을 분리해보겠습니다. 아래와 같이 usePlaylist이라는 Custom Hook을 만들어줍니다.

import React from 'react';

const usePlaylist = (initialSongs) => {
  const [songs, setSongs] = React.useState(initialSongs);
  
  const addSong = (song) => {
    setSongs([...songs, song]);
  };

  return {
    songs,
    addSong,
  };
};

export default usePlaylist;

이 Custom Hook은 초기 노래 목록을 받아와 songs 상태와 addSong 함수를 반환합니다. addSong 함수는 새로운 노래를 현재 목록에 추가하는 역할을 합니다.

Custom Hook 사용하기

이제 우리는 Playlist 컴포넌트에서 usePlaylist Custom Hook을 사용하여 음악 플레이리스트를 다룰 수 있습니다. 아래와 같이 코드를 수정해보겠습니다.

import React from 'react';
import usePlaylist from './usePlaylist';

const Playlist = () => {
  const { songs, addSong } = usePlaylist([
    { title: 'Song 1', artist: 'Artist 1' },
    { title: 'Song 2', artist: 'Artist 2' },
    { title: 'Song 3', artist: 'Artist 3' },
  ]);
  const [currentSong, setCurrentSong] = React.useState(null);

  const playSong = (song) => {
    setCurrentSong(song);
  };

  return (
    <div>
      <h1>음악 플레이리스트</h1>
      <ul>
        {songs.map((song, index) => (
          <li key={index} onClick={() => playSong(song)}>
            {song.title} - {song.artist}
          </li>
        ))}
      </ul>
      {currentSong && (
        <div>
          <h2>현재 재생 중인 곡</h2>
          <p>{currentSong.title}</p>
          <p>{currentSong.artist}</p>
        </div>
      )}
      <button onClick={() => addSong({ title: 'New Song', artist: 'New Artist' })}>새로운 곡 추가</button>
    </div>
  );
};

export default Playlist;

우리는 usePlaylist Custom Hook을 호출하고, 초기 노래 목록을 전달합니다. 그리고 Custom Hook에서 반환한 songs 상태와 addSong 함수를 사용하여 음악 플레이리스트를 다룹니다. addSong 함수는 버튼 클릭 시 새로운 곡을 추가하는 역할을 합니다.

마무리

이렇게 Custom Hook을 활용하여 음악 플레이리스트를 구현하는 방법을 알아보았습니다. Custom Hook을 사용하면 코드를 재사용하고 응집력 있는 컴포넌트를 만들 수 있습니다. 자신만의 Custom Hook을 만들어 원하는 기능을 쉽고 효율적으로 구현해보세요!

음악 플레이리스트 컴포넌트

Custom Hook 생성하기

Custom Hook 사용하기

마무리

관련 링크