-
[React.js] video 태그에 동적 값 할당FrontEnd/React.js 2022. 12. 29. 17:14
const Clip= (url:string) =>{ return ( <video width="320" height="240" controls autoPlay> <source src={url} /> </video> ) }
요렇게 선언했는데 이 후 url 값을 업데이트 해주어도 처음 할당된 영상만 보여지는 상황이 생겼다.
- 하고 싶은건 버튼 클릭시 url 값이 업데이트 되어 보여지는 영상도 바뀌는 것
이에 대한 해결책으로 video 태그에 키 값을 주거나 ref를 주는 것.
const Clip= ( url:string ) => { const videoRef = useRef(); useEffect(() => { videoRef.current?.load(); }, [url]); return ( <video ref={videoRef}> <source src={url} /> </video> ); }
const Clip=( url:string )=> { return ( <video key={url}> <source src={url} /> </video> ); }
참고 : https://stackoverflow.com/questions/41303012/updating-source-url-on-html5-video-with-react
'FrontEnd > React.js' 카테고리의 다른 글
[React] 컴포넌트가 데이터를 다루는 3가지 방법 (0) 2023.06.21 [React] 데이터를 실시간으로 갱신하기(useSWR, setInterval,useQuery) (0) 2023.03.19 [React.js] React Query 에 대해 (feat. SWR 과의 차이) -v3 (0) 2022.12.30 [React & 브라우저] 브라우저의 동작 과정 (feat. 렌더링 실행) (3) 2022.12.23 React-Query에 대하여 ( useQuery, useMutation ) (0) 2022.12.07