[React]useRef

useRef란🤔

• useState처럼 값을 저장하는 hook
• 🌟리랜더링과 상관없음 🌟, DOM 요소를 다루기 위한 용도로 주로 사용
• .current하면 현재 useRef의 값에 접근

useRef vs useState

import "./App.css";
import { useRef, useState } from "react";

function App() {
  const [count, setCount] = useState(0);
  const countRef = useRef(0);

  const plusStateCountButtonHandler = () => {
    setCount(count + 1);
  };

  const plusRefCountButtonHandler = () => {
    countRef.current++;
  };

  return (
    <>
      <div>
        state 영역입니다. {count} <br />
        <button onClick={plusStateCountButtonHandler}>state 증가</button> //클릭할때마다 증가됨
      </div>
      <div>
        ref 영역입니다. {countRef.current} <br />
        <button onClick={plusRefCountButtonHandler}>ref 증가</button> // 클릭할때마다 동일한 0
      </div>
    </>
  );
}

export default App;

🌟 state는 변경되면 렌더링이 되고, ref는 변경되면 렌더링이 안됨!

 

let vs useRef

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

const App = () => {
   const [renderer, setRenderer] = useSate(0);
   const count Ref = useRef(0);
   let countVar = 0;
   
   const doRendering = () => {
      setRenderer(renderer + 1);
   };
   
   const increaseRef = () => {
       countRef.current = countRef.current + 1;
   }
   
   const increaseVar = () => {
      countVar = countVar + 1;
   }
   
   return (
      <div>
         <p>Ref : {countRef.current} </p>
         <p>Var : {countVar} </p>
         <button onClick={doRendering}>렌더!</button>
         <button onClick={increaseRef}>Ref 올려</button>
         <button onClick={increaseVar}>Var 올려</button>
      </div>
   )
}

• 화면이 렌더링 될때마다 let은 초기화가 됨.
• useRef는 값이 저장되어 있어서 값 유지

DOM 접근 예시

id 폼에 포커스시키기

import { useEffect, useRef } from "react";
import "./App.css";

function App() {
  const idRef = useRef("");

  // 렌더링이 될 때
  useEffect(() => {
    idRef.current.focus();
  }, []);

  return (
    <>
      <div>
        아이디 : <input type="text" ref={idRef} />
      </div>
      <div>
        비밀번호 : <input type="password" />
      </div>
    </>
  );
}

export default App;