[실전 프로젝트] 플레이 중인 음원 활성화 (setTimeout X)

  [ 목적 ]  

음원 선택(Asmr.js) → 다른 카테고리로 이동(음원 재생 유지)

→ Asmr.js로 이동 시 사용자가 선택하여 플레이 중인 음원 활성화 시키는 부분에서 useEffect()를 사용하여

블록 안에 document.getElementById() or useRef()를 사용하여 background를 변경 시켜 주려고 함.

(예시)
React.useEffect(() => {
  const activeSound = document.getElementById(history.state1);
  activeSound.style.backgroundColor = "green";
}, [])

---

  [ 문제 발생 ]  

→ 해당 태그(요소)를 찾을 수 없다는 오류 발생

---

  [ 해결 ]  

→ setTimeout을 사용하여 DOM 요소가 렌더링 된 후 해당 함수를 실행함

  React.useEffect(() => {

    if (history.state1) {
      setTime1 = setTimeout(
        () => (
          (const selectItem = document.getElementById(history.state1)),
          (selectItem.style.backgroundColor = "#FBC037"),
          const setSong1(history.audio1),
          (const arr = [...arr, history.audio1.src]),
          setPlay(arr)
        ),
        500
      );
    }
    ... 생략

    return () => {
      clearTimeout(setTime1);
    };
  }, [getCategory]);

→ setTimeout은 임시 방편이었기 때문에 개선할 방법을 모색
→ Asmr.js(Asmr 페이지)에서 setTimeout 함수를 사용 했는 데 > 실질적으로 음원 활성화 / 비활성화가 적용 되는 부분은 AsmrList.js(음원 출력 해주는 컴포넌트)이였다.

---

  [ 리팩토링(refactoring) ]  

 

[첫번째 시도]

→ useRef() 사용 시 componentDidMount 시 해당 태그(요소)를 불러오지 못함. (onClick 시에만 console에 찍힘)

 

[두번째 시도]

→ AsmrList.js에 useEffect를 사용하여 DB에서 받아온 음원 목록이 있는 지 & 사용자가 플레이 중인 음원이 있는 지로 조건을 걸어주고 조건에 충족한다면 활성화 시키는 코드로 변경함.

이때 음원 목록을 담고 있는 state인 soundTrack의 값이 바뀌면 리렌더링(업데이트) 되도록 코드를 구현

  React.useEffect(() => {
    let playArr = [];

    if (history.play && soundTrack) {
      soundTrack.forEach((item) => {
        if (history.play.includes(item.asmrUrl)) {
          const activation = document.getElementById(item.asmrUrl);
          activation.style.backgroundColor = "#FBC037";
        }
      });

      if (history.audio1) {
        setSong1(history.audio1);
        playArr = [...playArr, history.audio1.src];
      }
      ... 생략

      setPlay(playArr);
    }
  }, [soundTrack]);