게임을 시작하면 백그라운드 음악이 재생되어야 할 것이다!

react-native-sound-player, react-native-track-player 등 모듈이 있지만 expo의 expo-av를 사용했다.

expo 공식 문헌 참고

expo install expo-av

우선 로컬 mp3 파일을 활용할 것이다.

아래와 같이 require로 가져오면 된다.

export const soundPath = {
    balloon: require('../../assets/sound/balloon.mp3'),
    fiesta: require('../../assets/sound/fiesta.mp3'),
    jamaicn: require('../../assets/sound/jamaicnyan.mp3'),
    mummy: require('../../assets/sound/mummy.mp3'),
    pikanya: require('../../assets/sound/pikanyan.mp3'),
    retro: require('../../assets/sound/retro.mp3'),
    wtf: require('../../assets/sound/wtf.mp3'),
}

const soundList = [...Object.values(soundPath)]
const [sound, setSound] = useState<Audio.Sound>();

useEffect(() => {
    playSound();
}, [])

const playSound = async() => {
    try {
        const path = soundList[Math.floor(Math.random() * soundList.length)]
        const { sound } = await Audio.Sound.createAsync(path);
        setSound(sound);
        await sound.playAsync();
    } catch (error) {
        console.error(error);
    }
}

const stopSound = () => {
    sound?.unloadAsync();
}

• Object.values로 mp3경로를 모두 가져온다.
• useEffect로 화면 랜더링되면 음악을 재생한다.
• 버튼에 각각 playSound, stopSound를 걸어두면 된다.

내가 많이 삽질하게된 이유

1. 아이폰 무음모드. 게임할 때도 무음모드로하면 음악이 재생안된다!

```tsx
const { sound } = await Audio.Sound.createAsync(require('./any.mp3'));
await sound.playAsync();
sound.unloadAsync();
```

`await` 하면 음악이 재생될 때까지 기다릴 줄 알았지만 완전히 틀어지는 것 까지 기다리는 거 같다.

틀자마자 unloadAsync하게 되서 음악이 재생되지 않았던거다. 

음악 객체 사용 완료하면 메모리에서 unload해줘야한다. 메모리 누수 방지

// 곡이 재생완료되면 unload 시킨다
useEffect(() => {
    return sound ? stopSound : undefined;
}, [sound])

🤸🏻‍♀️ clean-up이란?

컴포넌트가 마운트 해제되는 때에 정리(clean-up)를 실행

위 상황은 sound가 변동될 때마다 실행

리액트가 다음 차례의 effect를 실행하기 전에 이전의 렌더링에서 파생된 effect 또한 정리