외부 라이브러리를 사용하지 않고 React에서 비디오 재생/일시정지하는 방법
웹페이지에 <video> 태그와 “재생/일시정지” 버튼이 있습니다. 사용자가 버튼을 클릭하면 비디오가 재생되거나 정지됩니다. 이 자습서에서는 외부 라이브러리를 사용하지 않고 React에서 이 기능을 구현하는 다양한 방법을 살펴보겠습니다.
useRef 훅 사용
React에서 비디오 재생을 제어하는 한 가지 방법은 useRef 훅을 사용하는 것입니다. 이를 통해 비디오 요소에 대한 참조를 생성하고 해당 메소드와 속성에 액세스할 수 있습니다.
import React, { useRef } from 'react';
function VideoPlayer() {
const videoRef = useRef(null);
const handlePlayPause = () => {
if (videoRef.current.paused) {
videoRef.current.play();
} else {
videoRef.current.pause();
}
};
return (
<div>
<video ref={videoRef}>
<source src="path/to/video.mp4" type="video/mp4" />
</video>
<button onClick={handlePlayPause}>재생/일시정지</button>
</div>
);
}
설명
위 예제에서는, useRef 훅을 React에서 import하고 useRef(null)를 사용하여 videoRef를 생성합니다. 이렇게 하면 비어있는 참조 객체가 생성되고 이를 비디오 요소에 연결할 수 있습니다.
컴포넌트 내부에는 handlePlayPause 함수가 있으며, 현재 비디오가 일시정지되어 있는지 확인합니다. 만약 일시정지되어 있다면 play() 메소드를 호출하고 재생 중이라면 pause() 메소드를 호출합니다. 이를 통해 비디오가 각 버튼 클릭마다 재생과 일시정지를 번갈아가며 할 수 있게 됩니다.
비디오 요소는 ref 속성을 사용하여 videoRef를 비디오 요소에 연결하므로 소스 코드에서 참조할 수 있습니다.
클래스 컴포넌트 사용
만약 클래스 컴포넌트를 사용하는 것을 선호한다면, React.createRef()를 사용하여 비디오 요소에 대한 참조를 생성하는 방법과 동일한 기능을 달성할 수 있습니다.
import React, { Component } from 'react';
class VideoPlayer extends Component {
constructor(props) {
super(props);
this.videoRef = React.createRef();
}
handlePlayPause = () => {
const video = this.videoRef.current;
if (video.paused) {
video.play();
} else {
video.pause();
}
};
render() {
return (
<div>
<video ref={this.videoRef}>
<source src="path/to/video.mp4" type="video/mp4" />
</video>
<button onClick={this.handlePlayPause}>재생/일시정지</button>
</div>
);
}
}
설명
이 예제에서는 VideoPlayer라는 클래스 컴포넌트를 생성하고 React.createRef()를 사용하여 videoRef 참조를 선언합니다. 나머지 코드는 이전 예제와 비슷합니다. 비디오 요소의 paused 속성을 확인하여 재생하거나 일시정지할지를 결정합니다.
결론
useRef 훅과 클래스 컴포넌트 접근 방식 모두 외부 라이브러리를 사용하지 않고 React에서 비디오를 재생하고 일시정지할 수 있게 해줍니다. 코딩 스타일과 프로젝트 기본 설정에 맞는 접근 방법을 선택하십시오. 비디오 요소에 ref 속성을 연결하고 play()와 pause() 메소드를 사용하여 재생을 제어하는 것을 잊지 마세요.
이러한 기법을 사용하여 외부 라이브러리에 의존하지 않고 React 애플리케이션에서 대화형 비디오 플레이어를 만들 수 있습니다.
