React- 배경음악 재생하고 화면 벗어나면 음악 중지하기

1. 문제 상황

배경 음악을 재생한 후 다른 페이지를 가도 음악이 계속 재생하고 있는 상황

 

2. 문제 해결

함수형 컴포넌트의 생애주기를 관리할 수 있는 훅인 useEffect의 return 문을 활용하고

addEventListener 로 만들어준 event를 return 문 안에서 removeEventListener를 사용해 줌

useEffect(() => {
    const audio = new Audio(playList);

    const timeUpdateHandler = () => {
      setCurrentTime(audio.currentTime);
      setRatio((audio.currentTime / audio.duration) * 100);
      if (audio.duration === audio.currentTime) {
        setPlaying(false);
      }
    };

    if (playing) {
      audio.play().then(() => {
        audio.addEventListener("timeupdate", timeUpdateHandler);
      });
    } else {
      audio.pause();
      audio.removeEventListener("timeupdate", timeUpdateHandler);
    }

    return () => {
      audio.pause();
      audio.removeEventListener("timeupdate", timeUpdateHandler);
    };
  }, [playing, playList, setPlaying]);