[React.js] video 태그에 동적 값 할당

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