Custom Hook을 사용한 플레이리스트 생성 기능 추가

06 Nov 2023

customhook

플레이리스트는 음악 서비스 앱에서 핵심적인 기능 중 하나입니다. 사용자는 원하는 음악을 선택해서 자신만의 플레이리스트를 만들 수 있습니다. 이번에는 Custom Hook을 사용하여 플레이리스트 생성 기능을 추가해보겠습니다.

Custom Hook이란?

Custom Hook은 React에서 상태 관리 및 라이프사이클 관련 로직을 재사용하기 위한 방법입니다. 이를 사용하면 코드를 더욱 간결하고 읽기 쉽게 작성할 수 있습니다.

플레이리스트 생성 기능 추가하기

usePlaylist Custom Hook 생성

먼저, usePlaylist이라는 Custom Hook을 생성합니다. 이 Custom Hook은 플레이리스트 관련 상태와 함수를 제공합니다.

import { useState } from 'react';

const usePlaylist = () => {
  const [playlist, setPlaylist] = useState([]);

  const addToPlaylist = (song) => {
    setPlaylist([...playlist, song]);
  };

  return { playlist, addToPlaylist };
};

export default usePlaylist;

플레이리스트 컴포넌트에서 Custom Hook 사용

이제 플레이리스트 생성 기능을 사용할 컴포넌트에서 Custom Hook을 사용합니다.

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

const Playlist = () => {
  const { playlist, addToPlaylist } = usePlaylist();

  const handleAddToPlaylist = (song) => {
    addToPlaylist(song);
    alert('플레이리스트에 추가되었습니다!');
  };

  return (
    <div>
      <h2>플레이리스트</h2>
      <ul>
        {playlist.map((song, index) => (
          <li key={index}>{song}</li>
        ))}
      </ul>
      <button onClick={() => handleAddToPlaylist('신곡')}>신곡 플레이리스트에 추가</button>
    </div>
  );
};

export default Playlist;

플레이리스트 컴포넌트 사용

마지막으로, 플레이리스트 컴포넌트를 사용하여 음악 앱에 플레이리스트 생성 기능을 추가합니다.

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

const App = () => {
  return (
    <div>
      <h1>음악 앱</h1>
      <Playlist />
    </div>
  );
};

export default App;

이제 음악 앱을 실행하면 플레이리스트가 추가되고, 사용자가 신곡을 추가할 수 있는 기능이 구현됩니다.

마무리

Custom Hook을 사용하면 React 앱에서 더욱 효율적인 상태 관리와 로직 재사용이 가능해집니다. 이를 통해 코드의 재사용성과 가독성을 높일 수 있습니다. 플레이리스트 생성 기능을 예시로 살펴봤지만, Custom Hook은 다양한 기능의 구현에 활용할 수 있으니 유용하게 사용해보시기 바랍니다.

Custom Hook이란?

플레이리스트 생성 기능 추가하기

마무리

참고 자료