Custom Hook을 활용한 비디오 플레이어 구현

06 Nov 2023

reactjs

비디오 플레이어는 웹 애플리케이션에서 많이 사용되는 기능 중 하나입니다. 이번에는 Custom Hook을 활용하여 간단한 비디오 플레이어를 구현해보겠습니다. 이렇게 하면 여러 컴포넌트에서 재사용할 수 있으며, 코드 또한 간결해집니다.

Custom Hook 생성

첫 번째로, useVideoPlayer라는 Custom Hook을 생성해야 합니다. 이 Hook은 비디오 플레이어의 상태와 제어를 담당합니다. 아래는 해당 Hook의 기본 구조입니다.

import { useState, useEffect } from 'react';

const useVideoPlayer = (initialVideo) => {
  const [video, setVideo] = useState(initialVideo);
  const [isPlaying, setIsPlaying] = useState(false);

  useEffect(() => {
    // 비디오 로딩 또는 언로딩 로직
    return () => {
      // 언로딩 시 필요한 정리 로직
    };
  }, [video]);

  const play = () => {
    // 비디오 재생 로직
  };

  const pause = () => {
    // 비디오 일시 정지 로직
  };

  const stop = () => {
    // 비디오 정지 및 초기화 로직
  };

  const togglePlay = () => {
    // 비디오 플레이 또는 일시정지 로직
  };

  const seek = (time) => {
    // 특정 시간으로 이동 로직
  };

  return { video, isPlaying, play, pause, stop, togglePlay, seek };
};

export default useVideoPlayer;

위의 코드에서 빈 곳을 구현하여 비디오 플레이어의 동작을 커스터마이즈할 수 있습니다.

비디오 플레이어 컴포넌트

다음은 Custom Hook을 사용하여 실제 비디오 플레이어 컴포넌트를 만드는 방법입니다.

import React from 'react';
import useVideoPlayer from './useVideoPlayer';

const VideoPlayer = ({ videoUrl }) => {
  const { video, isPlaying, play, pause, stop, togglePlay, seek } = useVideoPlayer(videoUrl);

  return (
    <div>
      <video src={video} />

      <button onClick={togglePlay}>{isPlaying ? '일시정지' : '재생'}</button>
      <button onClick={stop}>정지</button>

      <input type="range" onChange={(e) => seek(e.target.value)} value={video.currentTime} min="0" max={video.duration} />

      <div>
        현재 시간: {video.currentTime} / 전체 시간: {video.duration}
      </div>
    </div>
  );
};

export default VideoPlayer;

위의 코드에서는 useVideoPlayer Custom Hook을 호출하여 필요한 상태와 메서드를 가져온 후, HTML과 함께 조합하여 비디오 플레이어를 구현합니다.

사용법

이제 VideoPlayer 컴포넌트를 다른 곳에서 사용할 수 있습니다. 사용법은 아래와 같습니다.

import React from 'react';
import VideoPlayer from './VideoPlayer';

const App = () => {
  return (
    <div>
      <h1>비디오 플레이어</h1>
      <VideoPlayer videoUrl="https://example.com/video.mp4" />
    </div>
  );
};

export default App;

위의 예시에서는 VideoPlayer 컴포넌트를 사용하여 비디오 URL을 전달합니다. 이렇게 하면 원하는 비디오가 플레이어에 로드되고, 컨트롤을 할 수 있습니다.

결론

Custom Hook을 활용하여 비디오 플레이어를 구현하는 방법을 알아보았습니다. 이를 통해 컴포넌트의 재사용성과 코드의 간결성을 높일 수 있습니다. 비디오 플레이어 외에도 다른 기능에도 Custom Hook을 적용하여 코드를 개선할 수 있습니다. 자신의 프로젝트에 적합한 Custom Hook을 만들어보세요!

#react #javascript