[React / 프로젝트] Context API 사용으로 테마음악 구현하기

좌측 상단 음악 컨트롤러

MusicProvider 컴포넌트

import React, { createContext, useState, useEffect } from 'react';
import { useLocation } from 'react-router-dom';

export const MusicContext = createContext();

export const MusicProvider = ({ children }) => {
  const [audio] = useState(new Audio('/sounds/energetic-bgm.mp3'));
  const [isPlaying, setIsPlaying] = useState(false);
  const location = useLocation();

  const togglePlay = () => {
    if (isPlaying) {
      audio.pause();
      setIsPlaying(false);
    } else {
      audio
        .play()
        .then(() => setIsPlaying(true))
        .catch((error) => {
          console.error('음악 재생 오류:', error);
        });
    }
  };

  useEffect(() => {
    audio.loop = true;

    return () => {
      audio.pause();
      setIsPlaying(false);
    };
  }, [audio]);

  useEffect(() => {
    audio.pause();
    setIsPlaying(false);
  }, [location, audio]);

  return <MusicContext.Provider value={{ isPlaying, togglePlay }}>{children}</MusicContext.Provider>;
};

 

자식 컴포넌트들에게 음악 관련 기능을 제공하는 프로바이더 MusicProvider 컴포넌트 구성

createContext 를 사용하여 음악 관련 상태를 공유할 컨텍스트를 생성

 

기능

1. 음악 상태관리

`useState `를 사용하여 오디오 객체와 재생 상태를 관리

구글링을 통해 찾은 `energetic-bgm` 파일을 배경윽으로 사용함

 

2. 음악 재생 토글

`togglePlay` 함수를 통해 음악 재생을 시작하거나 중지

재생 중 에러 발생 시 콘솔에 오류를 출력

 

3. 음악 루프 설정

`useEffect` 를 사용하여 컴포넌트 마운트 시 음악을 루프모드로 설정 `audio.loop = true`

 

4. 페이지 변경 감지 및 음악 중지

`useLocation` 훅을 사용하여 페이지 변경을 감지

페이지가 변경될 때마다 음악을 중지하고 재생 상태를 false로 설정

( 이 부분은 팀원들과 협의하여 결정했다. 나는 모든 페이지에서 음악을 재생시키고 싶었음 )

 

`isPlaying`과 `togglePlay` 함수를 컨텍스트 값으로 제공하여 자식 컴포넌트에서 사용

import { MusicContext } from '../features/Games/musicProvider';

const { isPlaying, togglePlay } = useContext(MusicContext);
 
// 컴포넌트 렌더링
<div className="setting-box">
  <div className="user-button" onClick={toggleDrawer}>
    <img src={User} alt="User Icon" />
  </div>
  <button className="music-button" onClick={togglePlay}>
    {isPlaying ? '■' : '▶'}
  </button>
</div>

 

Home 컴포넌트에서 MusicContext 를 사용하여 음악 재생 상태와 제어 함수에 접근.

음악 재생 상태에 따라 다른 아이콘을 표시하고, 클릭 시 음악을 재생 / 정지하는 버튼을 구현

Context API를 사용하여 음악 재생 상태를 전역적으로 관리하였고 Redux를 사용하지 않고 간단히 구현했다.