[TIL] [React_hook] useRef

useRef

DOM요소에 접근할 수 있는 React_hook,
document.querySelector() 와 비슷
ref는 마운팅되고 나서 언마운트 될때까지 값을 유지 하기때문에 리랜더링이 일어나더라도 값이 그대로 유지됩니다.
즉 변화는 감지하지만 랜더링을 일으키지 않습니다.

import React, { useRef } from 'react;

function App() {
  const countRef = useRef(0);
  console.log(countRef) // current : 0
  return(
    <div>
    </div>
  )
}

export default App;

input요소 focus

import { useState, useRef, useEffect } from 'react';

function App() {
  const inputRef = useRef();

  useEffect(()=>{
    console.log(inputRef) // {current : input}
  }, []);

  const login = () =>{
    alert(`환영합니다 ${inputRef.current.value}!`)
    inputRef.current.focus();
  }

  return(
    <div>
      <input ref={inputRef} type="text" placeholder='username' />
      <button onClick={login}>로그인</button>
    </div>
  )
}

export default App;