useRef

의미

💡 DOM 엘리먼트 주소값을 활용해야 하는 경우
(focus, media play 등)

특징

💡 컴포넌트가 Re-render되어도 바뀌지 않음
💡 리엑트는 선언형 프로그램 원칙을 따르기 때문에 부득이한 상황에서만 사용

사용예시

📗 focus

import { useRef } from "react";

function x(){
	const inputEl = useRef(null);
  	const handleClick = () => {
    	inputEl.current.focus();
    };
  
  	return (
    	<>
        	<input ref={inputEl} type="text"/>
        	<button onClick={handleClick}>a</button>
        </>
    );
}

📗 video

import { useRef } from "react";

function x(){
	const videoEl = useRef(null);
  	const handlePlay = () => {
    	videoEl.current.play();
    };
  	const handlePause = () => {
    	videoEl.current.pause();
    };
  
  	return (
    	<>
        	<video ref={videoEl} controls/>
        		<source type="video/mp4" src={영상주소} />
        	</video>
        	<button onClick={handlePlay}>play</button>
      		<button onClick={handlePause}>pause</button>
        </>
    );
}