[troubleshooting][html5, React]<video>와 <source>의 영상 업데이트 문제

 Problem 

⚠️ 상황

: 수어 교육 프로젝트의 게임 구현에서 정답 수어 영상이 제대로 업데이트 되지 않는 문제 발생

 

⚠️ 코드

(정답 수어 영상 jsx 코드)

const [answerApi, setAnswerApi] = useState("");

<video className="box-video" autoPlay>
    <source src={answerApi}></source>
</video>

 

React에서는 상태(state)가 변경되면 해당 컴포넌트가 리렌더링된다. 그래서 useState로 정답 영상 주소 상태값을 관리하여 값이 바뀌면 리렌더링이 되면서 정답 영상이 업데이트가 되어야하는데 왜 그러지 못한걸까?!

 

---

 Cause 

🧐 접근

: 먼저 게임 횟차, 정답 수어 영상 주소 등 데이터가 잘 담기고 업데이트 되고 있는지 로직을 확인하였습니다. 로직에는 문제가 없음을 확인하고 렌더링 과정에 문제가 있을 것이라고 생각하여 접근 범위를 좁혔습니다.

 

❗원인

: <video> 요소의 로딩 메커니즘과 React의 동작 방식

 

1️⃣ <video> 요소의 로딩 메커니즘

: HTML5 <video> 요소의 로딩 메커니즘은 초기 로드 시에만 소스(<source> 태그와 내부 src 속성)를 결정하고 이후에는 자동으로 소스 변경을 감지하지 않습니다. 따라서 <source>의 src 속성이 변경되어도 <video> 요소는 새로운 소스 로드 신호로 인식하지 않습니다.

 

2️⃣ React의 동작 방식

: <source> 요소의 src 속성 변경을 감지하고 가상 DOM 및 실제 DOM에 이 변경사항을 반영합니다. 그러나 이 DOM 업데이트는 <video> 요소의 내부 로딩 매커니즘에 영향을 주지 않습니다.

즉! React는 DOM 자체는 업데이트하지만, <video> 요소가 새로운 소스를 로드하도록 지시하지 않는 것입니다!

그래서 answerApi를 상태값으로 관리하고 있어도 정답 영상이 업데이트 되고 있지 않았던..🫠

 

---

 Solution 

✅ 해결

: answerApi 상태를 바인딩합니다.

<video className="box-video" autoPlay muted loop src={answerApi}></video>

 

answerApi는 상태값으로 관리되고 있습니다. 이것을 <video>태그이 src 속성에 동적으로 바인딩합니다. 값이 변경되면 React는 <video> 요소 자체를 새로운 answerApi 값으로 업데이트합니다. 이를 통해서 자동으로 새로운 비디오 소스를 로드하고 재생하게 되는 것입니다.

 

---

Review 

1. 원인을 잘 모르겠다면 체계적으로 접근해보자

: 어떠한 오류 문구도 확인 할 수 없었기 때문에 먼저 오류 발생 원인일 수 있는 가능한 원인들을 고려해보았다. '로직 검토 - 데이터 값 확인' '렌더링 문제' 이 두 가지의 경우로 가능성을 생각했다. 게임이다보니 많은 기능들이 돌아가고 있었고 많은 데이터들이 있었기에 데이터가 원하는 변수에 잘 담기고, 잘 업데이트 되는지를 먼저 확인해보았다. 이상이 없는 것을 확인하고 가능성을 제거해나가며 범위를 좁일 수 있었다.

가설을 설정하고 검증하는 과정을 거치며 적절한 원인을 파악하는 좋은 접근 방식을 알게되어 기분이 좋았다!👍

 

2. 코드 네이밍과 기능 모듈화를 신경쓰며 개발하자!

: 처음에는 네이밍과 모듈화가 충분히 고려되지 않았다. 페어 프로그래밍으로 이 부분을 개선했다.

나중에봐도 무슨 기능을 담당하는 함수인지 알 수 있게 하기위해 명확한 네이밍을 작성했다. 그리고 내가 짠 로직이지만 말로 설명하다보니 게임 구조를 더 논리적이게 파악할 수 있었다. 명확한 네이밍과 각 기능을 독립적인 모듈로 분리함으로써 코드의 가독성이 크게 향상됨을 느꼈는데 이게 문제해결에서 빛을 발했다. 데이터 흐름도 파악하기 편했고!

페어프로그래밍 덕분에 명확한 네이밍 작성, 기능 모듈화라는 좋은 습관을 가지게 되었다!👯

 

---

# 문제 해결에 참고했던 자료들

https://wit.nts-corp.com/2014/09/12/2077

Chrome 브라우저 HTML5 Video Element의 src 캐시 버그 | WIT블로그

https://stackoverflow.com/questions/5235145/changing-source-on-html5-video-tag

changing source on html5 video tag