[23.11.08] 오늘의 TIL (useRef)

useRef

useRef : 저장공간 혹은 DOM 요소에 접근할 수 있도록 하는 React Hook

useRef 가 사용되는 용도

1. 저장공간
   • state 와 비슷한 역할을 하지만 state 와 ref 의 차이점은
     ref 에 들어있는 값이 변화해도 렌더링을 일으키지않는다.
2. DOM
   • DOM 에 접근이 가능하다
     기존에 javaScript 에서 사용하는 getElementById, querySelector 와 같이 DOM을 선택할수있다.

예시코드

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

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

  const [id, setId] = useState("");

  const onIdChangeHandler = (event) => {
    setId(event.target.value);
  };

  useEffect(() => {
    idRef.current.focus();
  }, []);

  useEffect(() => {
    if (id.length >= 10) {
      pwRef.current.focus();
    }
  }, [id]);

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

export default App;

이처럼 DOM에 접근할때 사용하며
위 코드는 아이디가 10자리 입력되면 자동으로 비밀번호 필드로 이동하게 useRef 를 사용한 코드입니다.