커스텀 React Hooks: useAudio

시리즈의 마지막 에피소드에서 우리는 사용자의 네트워크 상태 관리를 단순화하는 후크를 발견했습니다. 오늘, 우리는 또 다른 유용한 커스텀 훅을 탐구할 것입니다: useAudio . 준비가 된? 갑시다!

Motivation

Implementation

Usage

Conclusion

Support Me

동기 부여

왜 그런 후크가 필요합니까? 글쎄요, 두 가지 예를 들겠습니다. 첫 번째는 내 개인 웹사이트입니다. iamludal.fr (이것은 자기 홍보 🙄가 아닙니다.) React로 구축되었으며, 상단 탐색 모음에는 밝은 테마와 어두운 테마 사이를 전환하는 버튼이 포함되어 있습니다. 실제로 소리를 조금만 높이면 스위치 소리가 들릴 수도 있습니다. 이 사운드는 이 커스텀 훅에서 나옵니다. 두 번째 예는 Typospeed 게임(자기 홍보도 아님)으로, 단어를 제거할 때 소리를 들을 수 있습니다(실제로 Typospeed는 Svelte 으로 만들어졌지만 아이디어는 알 수 있습니다). 두 예 모두에서 일부 사운드를 재생해야 하며 새 오디오를 수동으로 인스턴스화하고 볼륨, 재생 속도를 설정하여 반복하고 싶지 않습니다.

const Home = () => {
  const audio = useRef(new Audio('/switch.mp3'))

  useEffect(() => {
    audio.current.playbackRate = 1.5
    audio.current.volume = 0.8
  }, [])

  return (
    <button onClick={audio.current.play}>Play Sound</button>
  )
}

👎 We don’t want write all this code every time we need to use audio sounds. Also, we have to use the useRef hook in this situation and keep track of its current value in order to not recreate the audio instance at each component re-render.

즉, 이제 새로운 사용자 정의 후크를 구현할 충분한 이유가 있습니다. 손을 더럽히자! 👨🏻‍💻

구현

이전 부분에서 말했듯이 우리는 우리 자신을 반복하고 싶지 않습니다(이것이 커스텀 훅의 주요 목표입니다). 따라서 함수는 추가 옵션에 해당하는 오디오 인스턴스(정적 또는 동적일 수 있음)에 대한 선택적 매개변수를 사용합니다.

const audio = useAudio('/switch.mp3', { volume: 0.8 })

또한 .current 속성을 사용하고 싶지 않습니다. 새 후크 내부에서 이 논리를 추출해야 합니다. 이렇게 하면 오디오 인스턴스와 직접 상호 작용할 수 있습니다.

audio.play()
audio.pause()

따라서 골격은 다음과 같이 보일 것입니다.

const useAudio = (src) => {
  const audio = useRef(new Audio(src))

  return audio.current
}

이것은 후크의 첫 번째이자 기본 버전입니다. 추가 옵션이 필요하지 않은 경우 사용할 준비가 된 것입니다. 그러나 우리는 이 후크에 또 다른 매개변수인 options 객체를 추가할 것입니다. 해당 객체의 지정된 속성이 변경될 때마다 인스턴스를 업데이트해야 합니다. 이런 식으로 옵션은 useState 와 같은 다른 후크를 사용하여 외부에서 동적으로 업데이트될 수 있습니다. 이제 최종 후크 구현은 다음과 같습니다.

const useAudio = (src, { volume = 1, playbackRate = 1 }) => {
  const audio = useRef(new Audio(src))

  useEffect(() => {
    audio.current.volume = volume
  }, [volume])

  useEffect(() => {
    audio.current.playbackRate = playbackRate
  }, [playbackRate])

  return audio.current
}

ℹ️ If you need any other options, feel free to add them depending on your needs. For instance, you could add an array parameter for the play method in order to only play a specific part of the audio (particularly useful when you have one audio file with multiple sounds, which is a technique used by some games).

이제 후크를 사용할 준비가 되었습니다. 🤘

용법

첫 번째 예제로 돌아가서 이제 코드를 다음과 같이 단순화할 수 있습니다.

const Home = () => {
  const audio = useAudio('/switch.mp3', { volume: 0.8, playbackRate: 1.5 })

  return (
    <button onClick={audio.play}>Play Sound</button>
  )
}

우리는 이 새로운 후크 내부의 모든 로직을 추상화하여 더 간단하고 깨끗하며 읽기 쉬운 코드로 이어집니다.

결론

이 후크가 프로젝트에 유용하기를 바랍니다. 질문이 있는 경우 댓글 섹션에서 언제든지 질문하세요. 그럼 읽어주셔서 감사하고 다음에 새로운 커스텀 훅으로 찾아뵙겠습니다. 🤗


소스 코드는 CodeSanbox 에서 사용할 수 있습니다.

지원 해줘

저를 지원하고 싶다면 다음 링크를 클릭하여 저에게 커피를 사주세요.