React에서 TypeScript를 사용하여 video 참조에 대한 타입을 정의하는 방법

React에서 TypeScript를 사용하여 <video> 참조의 유형을 정의하는 방법

React.js 프로젝트에서 참조(ref)와 TypeScript를 사용하여 비디오 요소의 재생/일시정지 상태를 제어하려는 경우 TypeScript 린팅 오류가 발생할 수 있습니다. 이 블로그 포스트에서는 TypeScript를 사용하여 React에서 비디오 참조의 유형을 정의하고 관련 문제를 해결하는 방법에 대해 알아보겠습니다.

문제

다음과 같은 코드가 있다고 가정해 봅시다:

function App() {
    const playVideo = (event:any) => {
        video.current.play();
    }
    const video = useRef(null);

    return (
        <div className="App">
            <video ref={video} loop src={bike}/>
        </div>
    );
}

TypeScript를 사용할 때 다음 오류가 발생할 수 있습니다: TS2531: Object is possibly 'null'. 이 오류는 useRef 함수가 참조된 요소의 실제 유형과 null의 유니온 타입을 반환하기 때문에 발생합니다.

해결책

video 참조의 유형을 정의하려면 적절한 유형의 useRef 함수를 사용해야 합니다. 이 경우에는 유형을 HTMLVideoElement로 지정해야 합니다.

객체가 존재하지 않을 수도 있기 때문에 (컴포넌트가 마운트되기 이전에는 null 또는 undefined일 수 있기 때문에!), 간단한 null 체크를 사용할 수 있습니다. 다음은 코드의 업데이트된 버전입니다:

const App = () => {
  const video = useRef<HTMLVideoElement>();
  const playVideo = (event: any) => {
    video.current && video.current.play();
  };

  return (
    <div className="App">
      <video ref={video} loop src={bike} />
    </div>
  );
};

useRef 훅에 HTMLVideoElement 타입을 명시적으로 제공함으로써 TypeScript가 참조를 올바르게 인식하고 null 값을 제거합니다. null 체크 (video.current && video.current.play())는 video 참조가 존재할 때만 play 메서드를 호출하도록 보장합니다.

결론

이 블로그 포스트에서는 TypeScript를 사용하여 React에서 <video> 참조의 유형을 정의하는 방법을 배웠습니다. 적절한 유형, 이 경우에는 HTMLVideoElement,을 사용하고 null 체크를 수행함으로써 TypeScript 린팅 오류를 해결하고 비디오 요소의 재생/일시정지 상태를 효율적으로 제어할 수 있습니다.

다양한 요소와 컴포넌트에 대해 유형을 정의하는 방법을 이해함으로써 TypeScript를 사용하여 더욱 안전하고 신뢰성 있는 React 애플리케이션을 개발할 수 있습니다.

참고 자료 :

https://stackoverflow.com/questions/65724837/how-can-i-define-the-type-for-a-video-reference-in-react-using-typescript

같은 카테고리의 다른 글 보기 :

reactjs