[React] UseRef, UseEffect 를 사용해 webcam video 웹에 띄우기

react 실행하기

// 리액트 새로운 프로젝트 생성
create-react-app .

// 부트스트랩 설치
npm i bootstrap

React 에 WebCam 띄우기

import React, { useEffect, useRef } from 'react'

import 'bootstrap/dist/css/bootstrap.min.css'

function App(){

  let videoRef = useRef(null)

  //사용자 웹캠에 접근

  const getUserCamera = () =>{
    navigator.mediaDevices.getUserMedia({
      video:true
    })
    .then((stream) => {
      //비디오 tag에 stream 추가
      let video = videoRef.current

      video.srcObject = stream

      video.play()
    })
    .catch((error) => {
      console.log(error)
    })
  }

  useEffect(() => {
    getUserCamera()
  },[videoRef])

  return(
    <div className='container'>
      <h1>selfie App in React.js</h1>
      hello world
      <video className='container' ref={videoRef}></video>
    </div>
  )
}

export default App​

 

useEffect

Using the Effect Hook – React

class 없이도 state나 다른 리액트 기능을 사용할 수 있는 것??

useRef

Hooks API Reference – React

가변값을 가지는 '상자' 같은 역할

 

참고 유튜브

영상에서는 화면 캡처기능까지 설명해주고 있지만 내가 필요한 것은 웹캠이라 웹캠 코드만 따라해보았다

리액트에 대한 이해가 부족한 상태에서 코드를 짜려고 하니깐 문제가 많이 발생하는 것 같다.

우선 리액트에서의 Hook이라는 개념을 정확히 이해하는게 중요한 것 같다