DAY33 <useRef>

useRef

useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환한다.

useReft는 javascript를 사용할때 특정 DOM을 선택할 때 사용했던 getElementById querySelector 와 같이 리액트를 사용해서 DOM을 직접 선택해서 특정 엘리먼트를 선택할 때 사용된다.

변수에 useRef()를 선언해준 뒤 console.log에 찍어주면 아래와 같이 current 가 나오는데 여기서 current 는 DOM node 그대로를 보여준다.

//useRef 사용 예시

import React,{useRef} from 'react;

const Input=()=>{
  const inputExRef= useRef();
  const handleButtonClick=()=>{
    inputExRef.current.focus();
  }

  return(
  <>
      <input ref={inputExReft}>
      <button onClick={handleButtonClick}> Focus </button>>
  </>
  )

}